Выпадающий список для элемента input

@Nikita_WR · Регистрация: 13.11.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток,

у меня есть элемент input. Мне нужно сделать так, чтобы при изменении текста выпадал соответствующий список возможных вариантов ввода (как, например, подсказки в Visual Studio и других редакторах). С помощью чего можно это реализовать? Пример из visual studio во вложении.

Спасибо!

@kalabuni · 10.09.2016, 16:03

возможно несколько вариантов решения
самый простой #1 -- использовать для инпута атрибут autocomplete="on"
браузер сам запомнит вводимые вами значения и сам предложит вам выбрать одно из ранее вводимых

посложнее #2 -- в коде надо иметь javascript-массив возможных значений и javascript-функцию, которая из этого массива создаст выпадающий список
по событию oninput инпута запускается эта самая функция
ещё сложнее #3 -- где-то на сервере имеется PHP-файл, который возвращает возможные значения, а на странице имеется javascript-функция, которая по событию oninput инпута по технологии ajax связывается с PHP-файлом, получает от него возможные значения и отображает их в виде выпадающего списка (так работают подсказки поисковых систем)

@Azdeman · 11.09.2016, 10:17

Сообщение от kalabuni

по событию oninput инпута по технологии ajax связывается с PHP-файлом

или .keyup()

@kalabuni · 11.09.2016, 11:41

Сообщение от Azdeman

или .keyup()

или onkeydown, или onproperychange (для MSIE старых версий) -- это не принципиально

@Nikita_WR · 12.09.2016, 15:11 **[ТС]**

массив возможных значение генерируется автоматом на основании введенного текста (ищется подстрока) - это не проблема. Я не знаю, с помощью какого элемента можно это отобразить? Dropdown не хотелось бы использовать - не эстетично. Может быть можно как-то с помощью popup menu?

@kalabuni · 12.09.2016, 16:01

Сообщение от Nikita_WR

Я не знаю, с помощью какого элемента можно это отобразить?

посмотрите уже реализованные выпадающие списки подсказок (например, на сайтах Гугля и Яндекса) и выберите для повторения понравившийся вам вариант

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@Nikita_WR 1 / 1 / 0 Регистрация: 13.11.2013 Сообщений: 56

	Выпадающий список для элемента input 10.09.2016, 10:45. Показов 3714. Ответов 5 Метки нет (Все метки) Доброго времени суток, у меня есть элемент input. Мне нужно сделать так, чтобы при изменении текста выпадал соответствующий список возможных вариантов ввода (как, например, подсказки в Visual Studio и других редакторах). С помощью чего можно это реализовать? Пример из visual studio во вложении. Спасибо! Миниатюры 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	10.09.2016, 16:03
	возможно несколько вариантов решения самый простой #1 -- использовать для инпута атрибут autocomplete="on" браузер сам запомнит вводимые вами значения и сам предложит вам выбрать одно из ранее вводимых посложнее #2 -- в коде надо иметь javascript-массив возможных значений и javascript-функцию, которая из этого массива создаст выпадающий список по событию oninput инпута запускается эта самая функция ещё сложнее #3 -- где-то на сервере имеется PHP-файл, который возвращает возможные значения, а на странице имеется javascript-функция, которая по событию oninput инпута по технологии ajax связывается с PHP-файлом, получает от него возможные значения и отображает их в виде выпадающего списка (так работают подсказки поисковых систем) 1

@Nikita_WR 1 / 1 / 0 Регистрация: 13.11.2013 Сообщений: 56
	12.09.2016, 15:11 [ТС]
	массив возможных значение генерируется автоматом на основании введенного текста (ищется подстрока) - это не проблема. Я не знаю, с помощью какого элемента можно это отобразить? Dropdown не хотелось бы использовать - не эстетично. Может быть можно как-то с помощью popup menu? 0