Виджет Autocomplete. Автозаполнение

Последнее обновление: 1.11.2015

Виджет autocomplete предназначен для создания специальных полей ввода с функцией автозаполнения:

<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css"></style>
<script src="jquery-2.0.2.min.js"></script>
<script src="jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>	
<input type="text" id="lang" />

<script type="text/javascript">
$(function(){
		
	var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ;
	$('input#lang').autocomplete({
		source: langs
	});

});
</script>
</body>
</html>

В качестве источника автозаполнения указываем какой-нибудь массив и потом применяем виджет.

Виджет autocomplete в jquery ui

Подключение виджета к внешнему источнику

В предыдущем примере источник для списка автозаполнения задавался локально. Однако мы можем также динамически подключаться к какому-нибудь скрипту на сервере, который бы нам возвращал список вариантов для автозаполнения. В нашем случае это будет скрипт php. Пусть он будет выглядеть следующим образом:

<?php
	$filter = $_GET['filter'];

	$results = array('Java', 'JavaScript', 'VisualBasic', 'Pascal');
	$output='[';
	foreach ($results as $key => $value) {
		if(substr_count($value, $filter)>0){
			$output .= '{ "label" : "' . $value . '", "value" : "' . $value . '"},';
		}
	}
	// обрезаем последнюю запятую и закрываем кавычки
	$output = substr($output,0,-1) . ']';
	echo $output;
?>

Выходная переменная $output содержит весь список в формате json. В реальности, конечно, все элементы списка, скорее всего, будут извлекаться из БД, но я для простоты упростил пример.

По сути каждый элемент списка - это объект, у которого определены два свойства: label (отображаемая метка) и value (само значение). В данном случае оба свойства по значению совпадают.

На стороне клиента прием мог бы выглядеть следующим образом:

$('input#lang').autocomplete({ source: function(request,response) {
			
	$.getJSON('json.php', { filter : $('input#lang').val() }, function(data){
		
		var suggestions = []; // массив для хранения результатов
        $.each(data, function(key, val) {
					
				suggestions.push(val.value); // добавляем все элементы
            });
			response(suggestions);
		});
	}	  
});

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

Стилизация виджета

При применении виджета к элементу input к данному элементу добавляется класс ui-autocomplete-input. А область списка автозаполения представляет собой список ul:

<ul style="display: none; top: 30px; left: 8px; width: 143px;" tabindex="0" id="ui-id-1" 
class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all">
<li role="presentation" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" id="ui-id-9">Java</a></li>
<li role="presentation" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" id="ui-id-10">JavaScript</a></li>
</ul>

Изменив стили соответствующих классов, мы можем настроить отображение списка:

<style>
	li.ui-menu-item {
		font-size: 12px;
		font-faminy: Verdana;
	}
</style>
</head>
<body>	
<input type="text" id="lang" />

<script type="text/javascript">
$(function(){
		
	var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ;
	$('input#lang').autocomplete({
		source: langs
	});
});
</script>
</body>

Свойства виджета

Виджет имеет следующие свойства:

  • appendTo: указывает, какой элемент будет включать список для автозаполенния:

    <input type="text" id="lang" />
    <div id="langsList"></div>
    <script type="text/javascript">
    $(function(){
    	
    	var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ;
    	$('input#lang').autocomplete({ appendTo: "#langsList", source: langs });
    });
    </script>
    
  • autoFocus: при установке данного свойства в true выделяется первый элемент списка автозаполнения. По умолчанию свойство имеет значение false.

  • delay: указывает в миллисекундах время задержки до показа списка автозаполенния ($('#langs').autocomplete({ delay: 500 });). По умолчанию данное свойство равно 300

  • disabled: при установке у свойства значения true отключает виджет. По умолчанию имеет значение false.

  • minLength: указывает на минимальное количество символов, которое должен ввести пользователь, чтобы отобразился список автозаполнения: $('#langs').autocomplete({ minLength: 0 });. По умолчанию данное свойство имеет значение 1.

  • position: используя данное свойство, можно задать положение списка на странице. Объект, с помощью которого можно задать положение, использует ряд опций, список которых можно найти на странице https://api.jqueryui.com/position/. По умолчанию свойство имеет значение { my: "left top", at: "left bottom", collision: "none" }. Опция my указывает на позицию элемента списка автозаполнения, относительно которой идет выравнивание с элементом ввода. То есть left top выравнивает относительно левого верхнего угла. Опция at указывает уже позицию элемента ввода, относительно которой будет выравниваться список автозаполнения. Опция collision дополнительно настраивает отображение списка.

    Мы можем изменить начальные параметры, например, $('input#lang').autocomplete({ position: { my : "right top", at: "right bottom", collision: 'fit' }, source: langs });

  • source: задает источник для автозаполнения. Это может быть массив, который можно задать в качестве внешнего массива или прямо при свойстве: $('input#lang').autocomplete({ source: ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"]});

Методы виджета

Виджет autocomplete имеет следующие методы:

  • autocomplete("close"): закрывает список ($("#lang").autocomplete("close");)

  • autocomplete("disable"): отключает виджет

  • autocomplete("enable"): подключает виджет автозаполнения

  • autocomplete("destroy"): удаляет функциональность автозаполнения у элемента

  • autocomplete("widget"): возвращает объект jQuery, представляющий виджет (var widget = $("#lang").autocomplete("widget");)

  • autocomplete("option"): позволяет получить или установить значения свойств виджета. Например, установим и получим значение свойства collapsible:

    	var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ;
    	$('input#lang').autocomplete({ source: langs});
    	$('input#lang').autocomplete( "option", { autoFocus: true } );
    
  • autocomplete("search", "value"): производит поиск по списку так с учетом значения value. Например, метод $("#lang").autocomplete("search", "i"); будет эквивалентен действию ввода символа "i" в текстовое поле. И затем буду отображены все элементы списка, в которых присутствует символ "i"

События виджета

С помощью обработки следующих событий виджета мы можем произвести определенные действия в ответ на действия пользователя:

  • change(event, ui): событие возникает после изменения выбранного элемента.

    Параметр event содержит объект события, а параметр ui представляет объект, который содержит информацию о выбранном элементе:

    	var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ;
    	$('input#lang').autocomplete({ source: langs});
    	$('input#lang').autocomplete({
    		change: function( event, ui ) {
    			console.log(ui.item.value);
    		}
    	});
    

    Используя свойство ui.item, мы получаем выбранный элемент. Элемент определен в виде объекта {label, value}, поэому, чтобы получить значение выбранного элемента, используем свойство value

  • close(event, ui): возникает при закрытии списка автозаполнения

  • create(event, ui): возникает при создании виджета

  • focus(event, ui): возникает при передаче фокуса элементу

  • open(event, ui): возникает при открытии или отображении списка автозаполнения

  • response(event, ui): возникает после завершения поиска, но перед тем, как список результатов автозаполнения появится на экране. Чтобы получить все результаты списка, надо использовать объект ui.content, который представляет массив:

    	var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ;
    	$('input#lang').autocomplete({ source: langs});
    	$('input#lang').autocomplete({
    		response: function( event, ui ) {
    			for ( var i = 0; i<ui.content.length; i++ ) {
    				
    				console.log(ui.content[i].value);
    			}
    		}
    	});
    
  • search(event, ui): возникает перед выполнением поиска

  • select(event, ui): возникает при выборе элемента из списка:

    	var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ;
    	$('input#lang').autocomplete({ source: langs});
    	$('input#lang').autocomplete({
    		select: function( event, ui ) {
    			
    			console.log(ui.item.value);
    		}
    	});
    
Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850