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

可能还需要一些更多的改进，但这主要是它。谢谢。