HTML+CSS+JavaScript

Здравствуйте
есть такая задача

div с текстом
при клике на диве в нем вместо текста появляется input где можно этот текст редактировать
при нажатии энтер в этом инпуте изменения сохраняются (инпут пропадает и вместо него появляется введенное значение)
при клике в другое место инпут тоже пропадает и вместо него появляется старое значение (изменения не сохраняются)

значения в инпуте вводятся только через подсказки как в поиске гугла
соответственно, если я набрал букву "а" у меня ниже вылез список
- арбуз
- апельсин
- ананас

мне нужно чтобы при клике например на слово "арбуз" подсказки пропадали и вместо инпута ставало слово арбуз и изменения сохранялись

проблема следующая
событие потери фокуса инпутом срабатывает перед событием клика по подсказе, и получается клик не срабатывает и изменения не сохраняются

я нашел выход - сделал через animate медленное пропадание подсказок и все работает как нужно

но думаю что есть более правильное решение, кто подскажет?

Постройте это все по принципу выпадающего меню, обрабатывайте события у родителя, тогда все получится и без таймеров.

пробовал focusout ставить для родителя
оно срабатывает при клике на ссылку внутри этого родителя
и получается что оно срабатывает раньше чем клик по этой ссылке и тогда событие по клику уже не срабатывает, так как выпадающее меню пропадает

структура нтмл кода такая
<div id="parent">
<div id="input"><input value="а" /></div>
<div id="menu">
<a href="#">апельсин</a>
<a href="#">ананас</a>
<a href="#">абрикос</a>
</div>
</div>

Вы не то делаете. Выбросьте обработку фокуса вообще, замените это обработкой щелчка вне родителя, это ведь тоже самое будет. Все остальное это обработка родителем соответствующих событий дочерних элементов.