Input text с предложением вариантов
 

Здравствуйте!

Как сделать выпадающий список с вариантами ввода?
Например, как это реализовано в вк и на многих других сайтах:

Причём ненужно делать так, чтобы предлагаемый вариант появлялся с учётом вводимых букв, например ввёл букву "р" и в списке появляются "Россия", "Румыния" и т.д. Просто предложить варианты (их будет не больше 5) и всё.

Буду благодарен за помощь и наводки.

очень кропотливая работа, сделать для одного браузера не проблема.. Но реализовать совместимость со всеми браузерами(включая мобильные) уже довольно таки сложновато.

allanmiln,
гугла знает autocomplete
http://jqueryui.com/autocomplete/

Ну наверняка же есть готовые варианты.

конечно есть, но они все громоздкие, просят каких либо библиотек.. например та что предложил рони, требует подрубить jQuery, лично я не вижу смысла в таком плагине, ради которого нужно подрубать полуметровую библиотеку. Ну и плюс ко всему, чаще всего те что есть, не имею того что хотелось бы в них видеть. Либо дают сделать это, но путем трудоемкого изучения API и т.д.

рони,
а есть варианты, чтобы autocomplete показывался сразу при onfocus и не менялся в зависимости от вводимой информации в поле?

devote, jQuery не страшен, у меня все скрипты к нему привязаны :)
Да и тем более подгрузить дополнительные 100-500kb не такая уж и проблема сегодня.

allanmiln,
еся

нуну.. про мобилы совсем забыли? или вы под эту категорию людей сайты не пишете? Лично я как владелец подобных устройств, не особо радуюсь ожиданию загрузке сайта.. Чаще всего не дожидаюсь, закрываю и ищу что надо в другом месте. 3G-связь все же не такая уж и быстрая, плюс у кого то тарифы лимитированные.. А кидать людей на деньги своим сайтом, в котором будет одна страница весить метры.. Это через-чур.

А можете показать? :)

Кстати в HTML5 давно подобное придумали:

<input type="text" list="listCities" placeholder="Enter your location..">
<datalist id="listCities">
    <option value="Saint-Petersbug"></option>
    <option value="Moscow"></option>
    <option value="New York"></option>
    <option value="New Jersey"></option>
</datalist>

А можно как-то выпадение списка форсировать при фокусе? А то сейчас надо стрелку вверх/вниз нажать чтоб список появился.

ие при фокусе показывает

Лично я со стороны разработчика и со стороны посетителя предпочитаю качество и удобство. Для мобильных устройств можно делать отдельную версию сайта - это уже намного проще.

С учетом того что я этим постоянно занимаюсь, я с вами не соглашусь. Не так то и просто писать под мобилы, так как мобил море, браузеров в них море. Уж поверьте моему опыту, писать под десктопный браузер(ы) намного проще чем под мобильный(е)