Узнать разрешение вашего экрана и IP адрес   •   Online-инструменты
666 просм
3 комм
Поделиться:

Кроссбраузерный поиск в 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="http://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.

Чтобы поиск был более точным, в скрипте использована функция из этой статьи. Стили (оформление результатов) вы настраиваете сами.

Если вдруг у вас возникнут вопросы – пишите об этом в комментариях.

3
комментария
Nick
7.01 в 17:00
Ждемс от вас статью, где можно узнать о том, как при редактировании своего профиля и при регистрации на сайте добавить такой выбор городов для пользователя в dle. А то тупо пустое поле как-то глупо. И будем ждать от вас такую информацию на страницах оф.сайта dle, пусть поучаться. Спасибо!
  • 0
Nick, спасибо за идею - в ближайшее время реализуем
  • 0
Scorp
9.01 в 23:22
С полным списком стран и городов =)
  • 3
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария