jQuery的自動完成和PHP：填充輸入字段基於在自動填充字段中選擇選項從MySQL數據庫中的數據

Question

我試圖填充郵政編碼（即郵政編碼）輸入字段從MySQL數據庫中的數據，根據用戶選擇的選項來自jQuery自動填充字段的郊區。

自動完成工作正常 - 過濾的郊區列表是基於從用戶輸入詞檢索。源參考是一個PHP文件。但我無法弄清楚如何使用用戶選擇的選項回調數據庫來檢索郵編。可能郵政編碼可以在第一次調用來檢索，同時爲郊區：除了我不希望所有的郵政編碼，只需用戶最終選擇的一個。

我jQuery是如下：（該 「$（ '＃郵政編碼'）」 行不工作尚未...）

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script> 
    <script> 
    // autocomplete 
    $(function() { 
    $("#suburbs").autocomplete({ 
    source: "allSuburbs.php", 
    minLength: 3, 
    select: function(event, ui) { 
    $('#postcodes').val(ui.item.postcode); 
    }, 
    }); 
    }); 
    </script> 

相關的html：

<p>Suburb</p><input class="inputText" type="text" 
    size="50" name="term" id="suburbs" maxlength="60" /></td> 
    <td><p>State</p><input class="inputText" type="text" 
    size="5" name="" id="states" maxlength="4" /></td> 
    <td><p>Postcode</p><input class="inputText" type="text" 
    size="5" name="" id="postcodes" maxlength="4" /></td> 

PHP （allSuburbs.php）：

<?php 
    $con = mysql_connect("***","***","***"); 
    if (!$con) { die('Could not connect: ' . mysql_error()); } 
    $dbname = 'suburb_state'; 
    mysql_select_db($dbname); 
    $query = "SELECT name FROM suburbs"; 
    $result = mysql_query($query); 
    if (!$result) die ("Database access failed:" . mysql_error()); 
    //retrieving the search term that autocomplete sends 
    $qstring = "SELECT name FROM suburbs WHERE name LIKE '%".$term."%'"; 
    //query the database for entries containing the term 
    $result = mysql_query($qstring); 
    //loop through the retrieved values 
    while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) 
    { $row['name']=htmlentities(stripslashes($row['name'])); 
    $row['postcode']=htmlentities(stripslashes($row['postcode'])); 
    $row_set[] = $row['name'];//build an array 
    } 
    echo json_encode($row_set);//format the array into json data 
    mysql_close($con); 
    ?> 

我發現thse鏈接可能是最有幫助的：

http://www.simonbattersby.com/blog/jquery-ui-autocomplete-with-a-remote-database-and-php/ （這讓我開始）

http://www.jensbits.com/2010/05/29/using-jquery-autocomplete-to-populate-another-autocomplete-asp-net-coldfusion-and-php-examples/（這是最接近我的問題，雖然它填充的郵政編碼或郵政編碼場與基於狀態的選擇範圍郵編，而不是基於單個郵政編碼一個郊區/城市）。

任何幫助表示讚賞。 謝謝你， 安德魯

Answer 1

我已經建立正是此功能爲我的一個應用程序。有複雜的附加層在這裏，有兩個郊區查找（家庭和工作地址），每個填充匹配狀態和郵政編碼字段。後端是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(); 
     } 
    } 
}); 

Answer 2

在你的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結構那個郊區。

Answer 3

我想通了。謝謝你們。

而且我發現下面很接近我是後：

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); 
    ?> 

可能還需要一些更多的改進，但這主要是它。謝謝。