Пример использования

$(document).ready(function() {
.......
   $("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#country").autocomplete({source:country});
//Код второй вкладки (удаленная база данных)
   $("#city").autocomplete({source: 'jsonsuggest.php', minLength:4});
//Код третьей вкладки (управление извлеченными данными)
   var object=[
      {label:"Изображение 1", url:"mountimg.jpg", 
      description:"Закат в горах, Ергаки.", coord:{lt:"52.854413",ln:"93.367310"}},
      {label:"Изображение 2", url:"mountimg1.jpg", 
      description:"Вид на безымянную гору с озера 'Круглое', Кузнецкий Алатау.", 
      coord:{lt:"53.815653",ln:"89.283829"}},
      {label:"Изображение 3", url:"mountimg2.jpg", 
      description:"Озеро 'Харлыкголь', Кузнецкий Алатау.", coord:{lt:"53.800245",ln:"89.268723"}},
      {label:"Изображение 4", url:"mountimg3.jpg", 
     description:"Скала 'Два брата' (Парабола), Ергаки.", coord:{lt:"52.839225",ln:"93.397093"}}
   ];
   $("#image").autocomplete({source:object,select:function(event,ui){
      $("#wrap").css("display","block");
      $("#img").attr("src",ui.item.url);
      $("#desc").html(ui.item.description);
      $("#latitude").html(ui.item.coord.lt);
      $("#longitude").html(ui.item.coord.ln);
   }});
});

Определение и использование

С помощью метода autocomplete Вы можете превратить выбранный элемент в виджет autocomplete.

Данный виджет помогает производить быстрый поиск-выборку из предварительно составленного списка данных.

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

Виджет может производить поиск как по локальным, так и удаленным спискам. Локальные списки удобны для хранения небольших наборов данных (например список улиц города), а удаленные списки подходят для хранения больших наборов данных (например база данных всех городов мира).

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

Если Вы хотите произвести поиск по удаленным спискам данных, Вы должны указать в качестве источника строку содержащую адрес по которому располагаются данные. Значение введенное пользователем будет передано на указанный адрес в параметре term. К примеру если данные располагаются по адресу data.php и пользователь ввел "test", итоговый URL будет выглядеть так: data.php?term=test.

В качестве источника также может использоваться функция обратного вызова. С помощью функции обратного вызова Вы можете более гибко привязывать источник данных к виджету. Функция принимает два параметра:

1. Объект request. Объект имеет единственное свойство term, которое содержит значение введенное пользователем.
2. Функция обратного вызова response. Функция принимает единственный аргумент содержащий данные, которые будут предложены пользователю.

С помощью опций и событий перечисленных в таблицах далее на данной странице Вы можете настроить поведение данного виджета под конкретные нужды.

Синтаксис

$(селектор).autocomplete(опции,события)

селектор выбирает элемент, который будет превращен в виджет.

опции настраивают дополнительные аспекты поведения виджета.

события события связанные с данным виджетом.

Опции

События

Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.

Синтаксис

$(селектор).autocomplete({событие:function(event,ui){Код обработчика}})
//или
$(селектор).bind(".autocompleteсобытие",function(event,ui){Код обработчика})

Обратите внимание: например для того, чтобы привязать к виджету с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").autocomplete({create:function(event,ui){alert("Привет")}}).