Как сделать выпадающий список подсказок при вводе в поле поиска

@MisterY · Регистрация: 19.11.2021

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

Добрый вечер! Наткнулся еще на одно задание. Видел когда-то на сайте интересную реализацию поиска. Но не знаю, как его сделать. Как сделать вот такой поиск, как на фото. То есть чтобы вот так-вот подсвечивались слова с совпадением букв?

@mr_dramm · 30.12.2021, 00:45

Это не сделать с помощью нативных элементов html, все решения будут с использованием javascript

@DrType · 30.12.2021, 01:28

Да, на чистом HTML самое большое это использовать атрибут list, но соответствующий datalist придётся заполнять вручную...

@MisterY · 30.12.2021, 15:49 **[ТС]**

mr_dramm, DrType, А как сделать с помощью JavaScript? Какие методы или функции для этого надо использовать?

@Para bellum · 31.12.2021, 07:06

MisterY, а где находятся строки, по которым поиск производится?
В JS-объекте или на сервере, в базе данных?

Если в объекте, вот пример: https://www.w3schools.com/howt... mplete.asp
Если на сервере, то нужно делать AJAX-запросы.

Найти готовые реализации вы можете по запросу "javascript autocomplete".

@MisterY · 31.12.2021, 10:55 **[ТС]**

Para bellum, Спасибо. Вы полностью ответили на мой вопрос, ещё и с примерами)))

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@MisterY 41 / 30 / 12 Регистрация: 19.11.2021 Сообщений: 218

	Как сделать выпадающий список подсказок при вводе в поле поиска 29.12.2021, 22:44. Показов 5212. Ответов 5 Метки нет (Все метки) Добрый вечер! Наткнулся еще на одно задание. Видел когда-то на сайте интересную реализацию поиска. Но не знаю, как его сделать. Как сделать вот такой поиск, как на фото. То есть чтобы вот так-вот подсвечивались слова с совпадением букв? Миниатюры 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	30.12.2021, 00:45
	Сообщение было отмечено MisterY как решение Решение Это не сделать с помощью нативных элементов html, все решения будут с использованием javascript 1

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	30.12.2021, 01:28
	Да, на чистом HTML самое большое это использовать атрибут `list`, но соответствующий `datalist` придётся заполнять вручную... 1

@MisterY 41 / 30 / 12 Регистрация: 19.11.2021 Сообщений: 218
	30.12.2021, 15:49 [ТС]
	mr_dramm, DrType, А как сделать с помощью JavaScript? Какие методы или функции для этого надо использовать? 0

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	31.12.2021, 07:06
	Сообщение было отмечено MisterY как решение Решение MisterY, а где находятся строки, по которым поиск производится? В JS-объекте или на сервере, в базе данных? Если в объекте, вот пример: https://www.w3schools.com/howt... mplete.asp Если на сервере, то нужно делать AJAX-запросы. Найти готовые реализации вы можете по запросу "javascript autocomplete". 1

@MisterY 41 / 30 / 12 Регистрация: 19.11.2021 Сообщений: 218
	31.12.2021, 10:55 [ТС]
	Para bellum, Спасибо. Вы полностью ответили на мой вопрос, ещё и с примерами))) 0

Как сделать выпадающий список подсказок при вводе в поле поиска

Решение

Решение