JQuery Автозаполнение поля ввода для таблицы фильтров
В моей программе у меня есть таблица, которую я фильтрую с помощью поля ввода. Вы вводите что-то в поле поиска/ввода, и таблица сразу фильтруется, не нажимая Enter.
Теперь я хотел добавить автозаполнение в это поле ввода, и оно работает, но есть одна проблема. Когда я начинаю вводить что-то в поле ввода, я получаю предложения. Теперь я могу нажать на предложение, и оно будет записано в поле ввода. Это прекрасно работает. Но моя таблица не фильтруется, пока я не нажму клавишу ввода, и это моя проблема. Как сделать так, чтобы он автоматически отправлял/фильтровал таблицу без нажатия Enter после выбора предложения?
Вот мои две функции для фильтрации и автозаполнения.
$("#searchInput").autocomplete({
source: availableTags, //array with all possible search results of the table
});
$(document).ready(function(){
$("#searchInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#contractTable tr").filter(function(){
$(this).toggle($(this).find(".target").text().toLowerCase().indexOf(value) > -1) // I only want to search for two specific cells of every row thats why I use find(".target")
});
});
});
Я надеюсь, вы понимаете, чего я пытаюсь достичь, и, кстати, я новичок в JavaScript и jQuery, поэтому, пожалуйста, пощадите меня :)
Вот так: jsfiddle.net/24pchvgw Итак, что я хочу сделать, так это то, что когда вы просто вводите одну букву, а затем выбираете предложение, он мгновенно фильтрует таблицу. В этом примере вы должны нажать Enter после выбора одного из них.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Здесь я исправил это для вас: https://jsfiddle.net/eakumopw/1/
Ваша проблема в том, что вы подключили событие фильтрации только к "keyup". Но выбор предложений автозаполнения не является событием нажатия клавиши. Добавление другого события также не решит проблему, потому что поле предложений — это другой элемент.
Я проверил, какие события поддерживает jquery-autocomplete (http://tutorialspark.com/jqueryUI/jQuery_UI_AutoComplete_Events.php), и обнаружил, что событие close() является решением для меня.
Я передал процесс фильтрации в новую функцию doFilter( value ) и сделал вызов этой функции в событии close jquery-autcomplete.
$("#myInput").autocomplete({
source: availableTags,
close: function(event, ui) {
console.info("close");
doFilter($("#myInput").val().toLowerCase());
}
});
Большое спасибо! Действительно ценю это.
Не могли бы вы привести рабочий пример текущего состояния? Это очень поможет нам помочь вам, а не просто предоставить часть, которая не работает.