InputHint • Programmer

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

Gumroad

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

1.0.0.

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

Google Chrome 88, Firefox 85, Opera 74

Демонстрация работы

Обязательные требования

на вашем сайте должен работать PHP
к HTML странице должен быть подключен JQUERY

Подключение плагина на HTML страницу

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

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

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

<head>
    <link
        href="inputhint/inputhint.css"
        type="text/css" rel="stylesheet"
    >
</head>

<head>

<link

href="inputhint/inputhint.css"

type="text/css" rel="stylesheet"

</head>

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

<input type="text"
    class="inputhint"
    hint_query="query.php"
    limit="5"
>

<input type="text"

class="inputhint"

hint_query="query.php"

limit="5"

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

<script type="text/javascript"
    src="inputhint/inputhint.js"
></script>

src="inputhint/inputhint.js"

></script>

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

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"
></script>

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"

></script>

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

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

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

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

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

$query_rez = [
    ['a' => 'Text_A'],
    ['b' => 'Text_B'],
    ['c' => 'Text_C'],
    ['d' => 'Text_D']
];

$query_rez = [

['a' => 'Text_A'],

['b' => 'Text_B'],

['c' => 'Text_C'],

['d' => 'Text_D']

];

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

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

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

Это все

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

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

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