АВТОДОПОЛНЕНИЕ ЗНАЧЕНИЙ В ФОРМАХ С ПОМОЩЬЮ ВИДЖЕТА JQUERY

Аннотация. В статье рассматривается ограничение ввода данных через автодополнение значений в формах на примере виджета jQuery Autocomplete, который упрощает взаимодействие пользователя с системой и защищает данные. Отдельно рассматриваются и анализируются источники данных для автодополнения.

Ключевые слова: автодополнение, jquery, формы.

Для корректного ввода данных пользователя стоит ограничить через предложение ожидаемых вариантов с помощью инструмента автодополнения (autocomplete). Автодополнение позволяет пользователям быстро находить и выбирать из предварительно заполненного списка значений по мере их ввода, используя поиск и фильтрацию. Это сужает варианты выбора и не допустит ввод некорректных или опасных значений.

Одним из самых распространенных инструментов реализации этой функции является плагин JavaScript-библиотеки jQuery - Autocomplete. Он помогает пользователю заполнять текстовые поля, предлагая подходящие варианты по первым набранным им символам. Для выбора варианта из представленных подсказок можно воспользоваться клавиатурой (клавиши стрелок и enter) или мышью.

Любое поле, которое может принимать входные данные, может быть преобразовано в автозаполнение, а именно элементы с тегами “input”, “textarea” и элементы с атрибутом “contenteditable”. В качестве параметров можно указать минимальное количество символов, которое пользователь должен ввести перед выполнением поиска. При этом более высокое значение следует использовать, когда поиск одного символа может соответствовать нескольким тысячам элементов. Или, к примеру, можно определить положение меню предложения по отношению к соответствующему элементу ввода.

Важно понимать, что служит источником для автодополнения. Источник данных можно задать тремя способами: с помощью массива, строки (URL-ресурса) или функции.

Если количество вариантов не превышает 50-100 элементов, то использование массива будет удачным решением, поскольку все данные будут храниться локально и результат будет очень быстрым. Можно передавать массив строк, а можно передавать массив объектов со свойствами “label” и “value”.

Второй вариант: при использовании строки плагин автозаполнения ожидает, что строка будет указывать на ресурс URL, который будет возвращать данные JSON, сервер свою очередь будет искать все подходящие варианты по заданной подстроке в базе данных и выдавать их в качестве ответа.

Функция же позволяет искать подходящие элементы самостоятельно, через ajax-запрос, который явно прописывается. В качестве аргумента функция принимает объект запроса (с одним полем term, где будет текущее содержимое текстового поля, для которого нужно подобрать элементы автозаполнения) и функцию, которую нужно будет вызвать и передать ей список подходящих элементов автозаполнения. Этот вариант обеспечивает максимальную гибкость и может использоваться для подключения любого источника данных к автодополнению.

Таким образом, автодополнение упрощает процесс взаимодействия пользователя с системой, что минимизирует появление ошибок и отправку некорректных данных. Стоит также определиться с источником данных, и если у вас ограниченный набор данных (до 100 значений), то массив будет отличным решением. Однако если данных действительно много, то лучше воспользоваться функцией и явно прописать ajax-запрос, где сервер выберет и вернет необходимый набор значений. Эта гибкость обеспечит преимущество.

Список литературы:

1. Autocomplete // jquery.page2page.ru [Электронный ресурс]. - Режим доступа: http://jquery.page2page.ru/index.php5/ (дата обращения: 16.06.2019).
2. Autocomplete Widget // jquery ui [Электронный ресурс]. - Режим доступа: https://api.jqueryui.com/autocomplete/ (дата обращения: 16.06.2019).
3. Autofill: чего не знают веб-разработчики, хотя должны знать // habrahabr [Электронный ресурс]. - Режим доступа: https://habr.com/ru/company/mailru/blog/301840/ (дата обращения: 16.06.2019).
4. Help users checkout faster with Autofill // developers google [Электронный ресурс]. - Режим доступа: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill (дата обращения: 15.06.2019).
5. The HTML autocomplete attribute // developer.mozilla [Электронный ресурс]. - Режим доступа: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete/ (дата обращения: 15.06.2019).