вторник, 9 октября 2018 г.

Автокомплит для поля с предустановленным значением

Недавно столкнулся со следующей проблемой. Имеется форма с автокомплитом, реализованным через плагин devbridge/jQuery-Autocomplete. При первой загрузке поле, к которому привязан автокомплит, не заполнено, пользователь начинает что-то вводить и получает подсказки. Отдельно уточню, что подсказки выводятся в результате ajax-запроса на сервер. Далее, при выборе конкретной подсказки происходит сабмит формы, и страница перезагружается. Тут все хорошо.

После перезагрузки страницы в поле с автокомплитом уже предустановлено поисковое значение из предыдущего шага.

Теперь, если просто кликнуть по полю автокомплита, функция автокомплита запускается, шлет запрос на сервер и ищет подсказки по введенному в полю тексту. К тому же, данная реализация автокомплита настолько хитра, что тут же активирует первую найденную подсказку, что вызывает сабмит формы и перезагрузку страницы. Получается замкнутый круг. Что же делать?

Мое решение не претендует на правильность, возможно, есть какая-то опция в настройках, но я ее не нашел. Поэтому решил сделать следующее: перед активацией автокомплита фиксируем начальное значение поля. Далее используем опцию onSearchStart, которая определяет, можно ли начинать поиск или нет. В этой функции проверяем - если начальное значение поля пустое или текущее значение отличается от начального, то возвращаем true, разрешая поиск подсказок, иначе возвращаем false и запрещаем поиск. Получается вот такой сеттинг (html + javascript):

<div id="autocomplete_field_wrap">
    <input id="autocomplete_field" type="text" value="" />
</div>
<script src="./jquery.min.js"></script>
<script src="./jquery.autocomplete.js"></script>
<script>
$(document).ready(function () {
   var initialValue = $('#autocomplete_field').val();

   $('#autocomplete_field').autocomplete({
       appendTo: $('#autocomplete_field_wrap'),
       dataType: "json",
       minChars: 3,
       paramName: "q",
       serviceUrl: 'ajax/autocomplete.php',
       onSearchStart: function () {
           return initialValue === "" || initialValue !== $('#autocomplete_field').val();
       },
       onSelect: function () {
           console.log('value selected');
       }
   });
});
</script>


С поставленной задачей такой костылик вполне справляется.