Недавно столкнулся со следующей проблемой. Имеется форма с автокомплитом, реализованным через плагин 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>
С поставленной задачей такой костылик вполне справляется.
Комментариев нет:
Отправить комментарий