Autocomplete на jQuery UI

Не так давно узнал об очень классной штуке, как Autocomplete на jQuery UI для элементов input. Это что-то типа селекта получается, но все-таки это input и сюда можно ввести что угодно, хотя есть и выбор. Ниже во фрейме представлено демо, достаточно просто нажать в input и вы увидите результат

Давайте посмотрим, как это сделано. Сначала нужно подключить через CDN сам jQuery, jQuery UI и стили для jQuery UI

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Теперь добавим <input> в наш файл и обязательно укажем id

<input name="engine" id="engine" type="text">

И осталось самое важное — это код jQuery. Сначала добавим основной код, который отвечает за выадающий список

$('#engine').autocomplete({
	source: ['1400','1500','1600','1800','2000','2400','2500','2700','3000','3500'],
	minLength: 0,
	delay: 0
});

source — это значения, которые будут выпадать
minLength — это минимальное количество символов, которое нужно ввести, чтобы выпал список
delay — время задержки, после которого покажется выпадающий список. Измеряется в милисекундах.

Сейчас мы сделали, чтобы список начал показываться только после ввода символов, но давайте сделаем, чтобы при установки фокуса в инпут мы видели выпадающий список.

$('#engine').bind('focus', function() { 
	if ($(this).val() == '')
		$(this).autocomplete('search', '');
});

Вот и все, теперь у нас полностью рабочий код, а ниже представлен полный код от А до Z, так сказать

<html>
    <head>
		<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		
		
<script>
$(document).ready(function (){
	$('#engine').autocomplete({
		source: ['1400','1500','1600','1800','2000','2400','2500','2700','3000','3500'],
		minLength: 0,
		delay: 0
	});
	$('#engine').bind('focus', function() { 
		if ($(this).val() == '')
			$(this).autocomplete('search', '');
	});
});

</script>

	</head>
	<body>
		<input name="engine" id="engine" type="text">
	</body>
</html>

Так же можете скачать урок к себе на компьютер.

11.05.2014 jQuery admin 2145 0