InputHint

InputHint — JQUERY/PHP плагин, добавляющий к полям ввода типа input показ подсказок (вариантов вводимого текста), с возможностью их выбора пользователем, и заполнения поля текстом из выбранной подсказки.

Buy on Gumroad

Текущая версия

1.0.0.

Протестировано в браузерах

Google Chrome 88, Firefox 85, Opera 74

Демонстрация работы
Обязательные требования
  • на вашем сайте должен работать PHP
  • к HTML странице должен быть подключен JQUERY
Подключение плагина на HTML страницу

Для того, чтобы подключить плагин, нужно:

  1. Изменения на вашей HTML странице:

Подключить .css файл со стилями. Для этого в блоке «head» нужно добавить следующую строку:

Для поля input, для которого нужно подключить подсказки, указать класс «inputhint» и задать параметры»hint_query» и «limit». В параметре «hint_query» нужно указать путь к файлу «query.php».

Подключить js-script с плагином:

Т.к. это JQUERY плагин, проверьте, что на странице подключен JQUERY:

  1. Отредактируйте файл «query.php» так, чтобы он возвращал набор данных для появляющихся подсказок на основании текста, который вводит пользователь в поле input.

На вашем сайте должен работать PHP.

В файле «query.php» можете написать SQL запрос к своей базе данных или любой другой код, который будет возвращать нужные вам данные.

Требования к возвращаемым данным: это должен быть двух-мерный ассоциативный массив с парами «ключ» — «значение».

Простейший пример возвращаемых данных:

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

  1. Отредактируйте файл «inputhint.css»

Этот файл отвечает за оформление внешнего вида появляющихся подсказок. Отредактируйте его в соответствии со стилями вашей HTML страницы.

  1. Это все

Теперь, каждый раз, когда пользователь набирает текст в поле «input» (начиная с 3-х символов), выполняется файл «query.php» и возвращаемый им результат показывается пользователю в виде подсказок под полем.

Если пользователь кликает на любую из них, поле «input» заполняется текстом этой подсказки.

В дополнение к этому при выборе пользователем подсказки генерируется javascript-событие «inputhint_item_selected», которое может быть обработано вами для каких-то других задач, например, заполнения других полей.