JQuery autocomplete и PHP: заполнение поля ввода данными из базы данных mySQL на основе выбранной опции в поле автозаполнения

Я построил именно эту функцию в приложении. Здесь есть еще один уровень сложности, так как есть два поиска в пригороде (домашний и рабочий адреса), каждое заполняющее состояние соответствия и поля почтового индекса. Внутренний интерфейс – это perl, а не PHP, но это не относится к обработке на стороне клиента. В конечном счете, back-end возвращает структуру JSON с массивом хешей, подобным этому:

 [ { "id":"...", "value":"...", "state":"...", "pcode":"..." }, ... ] 

Ключ id содержит имя пригорода, а ключ значения содержит строки типа «JOLIET IL 60403», поэтому правильный набор данных выбирается один раз, решая проблему нескольких городов / пригородов с тем же именем в разных местах и ​​делая вызов -backs, чтобы решить это.

После выбора значения подголовника (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(); } } }); 

В вашей функции select вы захотите отключить другой запрос ajax. Этот новый запрос ajax отправит выбранный пригород в другой скрипт php, который вернет почтовые индексы для этого пригорода. В обратном вызове, связанном с этим запросом ajax, заполните возвращаемые почтовые индексы в вашу форму.

Вы хотите использовать jQuery.get для запуска нового запроса ajax: http://api.jquery.com/jQuery.get/

 select: function(event, ui) { $.get("postcodes.php", { suburb: $("#suburbs").val }, function(postCodes) { // use data in postCodes to fill in your form. }, "json"); } 

postcodes.php возьмет $ _GET ['пригород'] и вернет некоторую структуру json, содержащую почтовые индексы для этого пригорода.

Я понял. Спасибо вам за все.

Также я нашел следующее довольно близко к тому, что я был после:

http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/

Соответствующий jQuery:

  <script type="text/javascript"> $(document).ready(function(){ var ac_config = { source: "SuburbStatePostcodeRetriever.php", select: function(event, ui){ $("#suburb").val(ui.item.locality); $("#state").val(ui.item.state); $("#postcode").val(ui.item.postcode); }, minLength:3 }; $("#suburb").autocomplete(ac_config); }); </script> 

HTML:

  <form action="#" method="post"> <p><label for="city">Suburb</label><br /> <input type="text" name="city" id="suburb" value="" /></p> <p><label for="state">State</label><br /> <input type="text" name="state" id="state" value="" /></p> <p><label for="zip">Postcode</label><br /> <input type="text" name="zip" id="postcode" value="" /></p> </form> 

PHP:

  <?php // connect to database $con = mysql_connect("********","********","********"); if (!$con) { die('Could not connect: ' . mysql_error()); } $dbname = '********'; mysql_select_db($dbname); $initialSuburbsArray = array( ); $result = mysql_query("SELECT locality, postcode, state FROM ********",$con) or die (mysql_error()); while( $row = mysql_fetch_assoc( $result ) ) { $initialSuburbsArray[] = $row; } $suburbs = $initialSuburbsArray; // Cleaning up the term $term = trim(strip_tags($_GET['term'])); // get match $matches = array(); foreach($suburbs as $suburb){ if(stripos($suburb['locality'], $term) !== false){ // Adding the necessary "value" and "label" fields and appending to result set $suburb['value'] = $suburb['locality']; $suburb['label'] = "{$suburb['locality']}, {$suburb['postcode']} {$suburb['state']}"; $matches[] = $suburb; } } // Truncate, encode and return the results $matches = array_slice($matches, 0, 5); print json_encode($matches); mysql_close($con); ?> 

Вероятно, требуется еще несколько усовершенствований, но это в основном это. Благодарю.