Артём Мáлков

Кроссбраузерный поиск в select через input на jQuery

16 ноя9 коммАртём Мáлков

На одном из сайтов, с которыми мне довелось поработать, был 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.

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

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

Рекомендуем к просмотру
Как осуществить проверку на точное совпадение на jQuery?
Статьи и советы
Объединяем несколько значений input/textarea в одном поле на jQuery
Модули и скрипты
Поиск по определенным категориям в DLE
Хаки
9
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 1
    1080
      •  Команда Pandoge
    14 дек в 02:31

    Alex, проблема в том, что вариантов может быть несколько и что должен делать enter в таком случае?

    Сейчас выбор работает на стрелках + enter. Если нужен только enter (при этом выбираться будет первое значение из найденного списка) - напишите, постараюсь подредактировать скрипт.

    • 1
    1
      •  Пользователь
    14 дек в 00:08

    Добрый.

    Подскажите, а как по enter сделать выбор после поиска,а не по клавиши вниз или кликом мыши по найденному варианту?

    • 1
    766
      •  Гости
    5 июл в 10:18

    Вот ищу в гугле про :exact, но ничего найти не могу. Есть какая ссылка на документацию?

    • 1
    1080
      •  Команда Pandoge
    30 июн в 23:32

    Виталий, нет возможности проверить. Но думаю что да.

    • 1
    766
      •  Гости
    30 июн в 04:45

    Этот метод нормально работает на мобильных устройствах?

    • 2
    766
      •  Гости
    18 мая в 11:01

    Отлично! просто и понятно! В закладки! Спасибо!

    • 3
    766
      •  Гости
    9 янв в 23:22

    С полным списком стран и городов =)

    • 6
    1080
      •  Команда Pandoge
    7 янв в 20:06

    Nick, спасибо за идею - в ближайшее время реализуем

    • 1
    766
      •  Гости
    7 янв в 17:00

    Ждемс от вас статью, где можно узнать о том, как при редактировании своего профиля и при регистрации на сайте добавить такой выбор городов для пользователя в dle. А то тупо пустое поле как-то глупо. И будем ждать от вас такую информацию на страницах оф.сайта dle, пусть поучаться. Спасибо!

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge