Я встроил точно эту функцию в мое приложение. Здесь есть дополнительный уровень сложности, в котором есть два поиска пригорода (домашний и рабочий адреса), каждый из которых заполняет соответствующие поля состояния и почтового индекса. Серверная часть - это Perl, а не PHP, но это не относится к обработке на стороне клиента. В конечном итоге сервер возвращает структуру JSON с массивом хэшей, например:
[ { "id":"...", "value":"...", "state":"...", "pcode":"..." }, ... ]
Ключ id содержит имя пригорода, а ключ значения содержит строки типа «JOLIET IL 60403», поэтому правильный набор данных выбирается один раз, решая проблему нескольких городов / пригородов с помощью одно и то же имя в разных местах и обратные вызовы для решения этой проблемы.
После выбора значения пригорода (id), состояния и pcode вводятся в соответствующие параметры.
Следующий код также кэширует предыдущие результаты (и кеш распределяется между домашним и рабочим поиском).
$('#hm_suburb').addClass('suburb_search').attr(
{suburb: '#hm_suburb', pcode: '#hm_pcode', state: '#hm_state'});
$('#wk_suburb').addClass('suburb_search').attr(
{suburb: '#wk_suburb', pcode: '#wk_pcode', state: '#wk_state'});
var sub_cache = {};
$(".suburb_search").autocomplete({
source: function(request, response) {
if (request.term in sub_cache) {
response($.map(sub_cache[request.term], function(item) {
return { value: item.value, id: item.id,
state: item.state, pcode: item.pcode }
}))
return;
}
$.ajax({
url: suburb_url,
data: "term=" + request.term,
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
sub_cache[request.term] = data;
response($.map(data, function(item) {
return {
value: item.value,
id: item.id,
state: item.state,
pcode: item.pcode
}
}))
} //,
//error: HandleAjaxError // custom method
});
},
minLength: 3,
select: function(event, ui) {
if (ui.item) {
$this = $(this);
//alert("this suburb field = " + $this.attr('suburb'));
$($this.attr('suburb')).val(ui.item.id);
$($this.attr('pcode')).val(ui.item.pcode);
$($this.attr('state')).val(ui.item.state);
event.preventDefault();
}
}
});