Кроссбраузерный поиск в select через input на jQuery
На одном из сайтов, с которыми мне довелось поработать, был select, в котором хранились названия всех городов России. Ну, может и не всех, но в районе 2000 городов точно было. Представьте себе, что вы открываете такой список и пытаетесь найти нужный вам город. Зрелище так себе, согласитесь.
В таком случае на ум мне пришло следующее: а что если скрыть весь этот список и осуществить по нему поиск через тот же input, и выбрать нужный нам пункт при успешном совпадении введенного города с имеющимися.
Поискав информацию по этому поводу, я узнал, что в jQuery есть очень интересная штука под названием «autocomplete» – плагин, который помогает пользователю заполнять текстовое поле на основе сравнения введенной информации с существующей. Именно это и легло в основу моего скрипта.
Итак, приступим к реализации. Для начала нам нужно составить какой-нибудь select и input:
<input type="text" value="" id="input_search">
<select id="city">
<option disabled selected>Выберите город</option>
<option value="Москва">Москва</option>
<option value="Кострома">Кострома</option>
<option value="Питер">Питер</option>
<option value="Уфа">Уфа</option>
</select>
<style>
#city {
display: none;
}
</style>
При этом, как вы заметили, мы сразу скрываем select.
Далее в секции HEAD подключаем необходимые библиотеки:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
И завершающим этапом будет вставка скрипта перед закрывающим тегом </body>:
<script>
var options = $("#city option");
var array_option = new Array();
for(var i=1; i<options.length; i++) {
array_option.push(options[i].text);
}
$("#input_search").autocomplete({
source: array_option,
minLength: 3 // Количество символов, от скольки начинать поиск
});
$.expr[":"].exact = $.expr.createPseudo(function(arg) {
return function(element) {
return $(element).text() === arg.trim();
};
});
$(document).on("click", ".ui-widget-content li div", function() {
var target_option = $(this).text();
$("#city option:exact("+target_option+")").attr("selected", "selected");
});
</script>
Как работает скрипт? Сначала собирается массив всех данных select. Затем осуществляется поиск по этому массиву и в случае совпадения предлагаются всевозможные варианты, после чего, при клике на один из вариантов, происходит выбор пункта в select.
Чтобы поиск был более точным, в скрипте использована функция из этой статьи. Стили (оформление результатов) вы настраиваете сами.
Если вдруг у вас возникнут вопросы – пишите об этом в комментариях.