Автозаполнение двух связанных input’ов

Дано: два поля input type=text. В первом необходимо указать клиента, а во втором выбрать домашнее животное, принадлежащее этому клиенту. Обычный использовать нельзя, ибо клиентов много и лазить по списку совсем не хочется.
Да и не нужно, есть ведь отличный плагин Autocomplete для JQuery.

Что нужно сделать, чтобы все заработало:

Вначале создает HTML-код:

<input type=text id=client taborder=1> здесь будет фамилия клиента
<input type=hidden id=client_id name=forma[client_id]> а здесь будет код клиента
<input type=text id=pet taborder=2> здесь будет кличка питомца
<input type=hidden id=pet_id name=forma[pet_id]> здесь будет код питомца

Теперь определяем обработчики для поля с клиентами:

$(document).ready (function (){
$(«#client»).autocomplete («data_clients.php», {});
}

data_clients.php выглядит следующим образом:

Подключение к базе опускаю, ибо и так понятно
$q = strtolower ($_GET["q"]);
if (!$q) return;
$rows = $DB->select («select * from clients»);
foreach ($rows as $numRow=>$c){
$id = $rows[$numRow]['id'];
$name=$rows[$numRow]['last_name'].' '.$rows[$numRow]['first_name'];
$name = Win1251toUTF8 ($name);
echo «$name|$id\n»;
}
?>

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

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

$(«#client»).result (function (event, data, formatted) {
var hidden = $(«#client_id»);
hidden.val (data[1]);
hidden.click ();
});

Первая часть работы закончилась. Вторая часть более сложная.

Во-первых, нам нужно передать код выбранного клиента. Для этого пишем маленькую JS-процедурку:

function getClientId () {
return document.getElementById ('client_id').value;
}

Затем указываем ее в качестве параметра для автозаполнения:

$(«#pet»).autocomplete («data_pets.php», {
extraParams: {bar: getClientId ()
}
});

PHP-скрипт data_pets.php приводит не буду, так как он почти идентичен скрипту data_clients.php. В SQL запросе пишем условие с учетом переменной $bar.

Вроде все. Но проблема в том, что при выборе клиента и изменении поля с кодом клиента, jQuery это изменение не замечает, так что скрипту data_pets.php передается все время один и тот же изначальный параметр. Нужно вручную указать на изменение. Именно для этого мы в обработчике «$(«#client»).» добавили строку «hidden.click ();». Теперь лишь нужно перезагрузить обработчик pet:

$(«#client_id»).click (function (){
$(«#pet»).attr («value»,'');
$(«#pet_id»).attr («value»,'');
$(«#pet»).unbind ().autocomplete («data_pets.php», {
extraParams: {bar: getClientId ()}
});

$(«#pet»).result (function (event, data, formatted) {
var hidden = $(«#pet_id»);
hidden.val (data[1]);
hidden.click (); }

);
});

Все. Теперь все работает.

Leave a Reply