jQuery UI Autocomplete

Создание виджета Autocomplete

Чтобы создать элемент управления автозаполнением, следует вызвать метод autocomplete() для соответствующего элемента input.

...
<input id="autocomp"/>
...
<script type="text/javascript">

    $(function() {

        var array = ["Астра", "Нарцисс", "Роза", "Пион", "Примула", "Подснежник", "Мак", "Первоцвет", "Петуния", "Фиалка"];

        $('#autocomp').autocomplete({ source: array })

     });

</script>

Использование массива объектов в качестве источника данных

В качестве источника элементов списка автозаполнения вместо строк могут использоваться массивы объектов.

$(function() {
    var array = [{label: "Астры (бордовые)", value: "Астры"}, 
			       {label: "Нарциссы(белые)", value: "Нарциссы"}, 
			       {label: "Розы (розовые)", value: "Розы"}, 
			       {label: "Пионы (розовые)", value: "Пионы"}]
            
    $('#autocomp').autocomplete({
                source: array
    })
});

Использование дистанционного источника данных

Опция source,  обеспечивает возможность выбора самых различных источников данных.

Как только средству автозаполнения понадобятся данные, jQuery UI выполнит HTTP-запрос по указанному URL-адресу, используя метод GET.

$(function() { 
    $('#autocomp').autocomplete({
                source: 'phphandler.php'
    })	
});

Использование функции в качестве источника данных

Для создания источника элементов автозаполнения, в полной мере приспособленного к конкретным потребностям пользователей, можно использовать функцию.

$(function() {
	var array = ["Астра", "Нарцисс", "Роза", "Пион", "Примула",
			      "Подснежник", "Мак", "Первоцвет", "Петуния", "Фиалка"];
           
    $('#autocomp').autocomplete({
                source: function(request, response) {
                    var term = request.term;
                    var pattern = new RegExp("^" + term, "i");
                    
                    var results = $.map(array, function(elem) {                       
                        if (pattern.test(elem)) {
                            return elem;
                        }
                    })                    
                    response(results);
				}
    })
});

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

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