Поле ввода опций выпадающего списка

Question

Я смотрю на создание чего-то вроде этого:

http://konigi.com/interface/kontain-search

альтернативный текст http://s3.amazonaws.com/konigi/interface/kontain-search-2.png

Я не думаю, что у кого-то есть ресурсы, которые могли бы мне помочь? Я знаю, что не даю много информации, но я не знаю, с чего начать.

Ура!

РЕДАКТИРОВАТЬ Извините, я имел в виду только выпадающий список / поле ввода, больше ничего на этом сайте.

ВНОВЬ РЕДАКТИРОВАТЬ Выпадающий список находится внутри поля ввода, поэтому мне было интересно.

Answer 1

Это может быть что-то похожее на эти примеры, но только с одним основным элементом. и манипулировать jquery каждым "li" и тем действием, которое было предпринято

пример 1 | пример 2 | пример 3 | пример 4

редакция ответа: это делается с помощью css. все содержится в div -> input + menu. для ввода удалены стили границ и цвет фона такой же, как у контейнера div.

Answer 2

Я думаю, что здесь происходит не то, что раскрывающийся список находится внутри поля ввода, а скорее то, что хром поля ввода скрыт, и он помещается внутри элемента, выглядящего как вход вместе с раскрывающимся списком.

Answer 3

Я не углублялся в сайт, но с логической точки зрения, возможно, поле поиска И выпадающий список находятся "внутри" другого элемента (div?), Который формирует сложный элемент управления ... и просто форматируется (CSS) / действия (jQuery) размещены на тех.

<div id="searchDiv">
    <div id="searchText"></div>
    <div id="searchDropdown"></div>
    <div id="searchButton"><div>
</div>

Достаточно легко настроить что-то подобное.

Answer 4

Ну, вы помещаете часть формы поиска в скрытый div и открываете ее, когда пользователь нажимает или наводит курсор на какой-либо другой элемент, внутри или снаружи формы. Используйте CSS по мере необходимости для позиционирования div. Не совсем уверен, какие проблемы могут возникнуть у вас с чем-то вроде этого.

Может быть, вы можете быть более конкретным и разбить эту проблему на несколько более сфокусированных вопросов?