jQuery自动完成和PHP：根据自动完成字段中的选定选项，使用来自mySQL数据库的数据填充输入字段

Question

我试图根据用户从jQuery自动完成字段中选择的Suburbs选项，使用mySQL数据库中的数据填充邮政编码（即zipcode）输入字段。

自动完成功能可以正常工作-根据用户输入的条件检索过滤后的郊区列表。 源引用是一个PHP文件。 但是我不知道该如何使用用户的选定选项来回调数据库以检索邮政编码。 可能可以在第一个呼叫中与郊区同时检索邮政编码：除非我不希望所有邮政编码，而只是用户最终选择的邮政编码。

我的jQuery如下：（“ $（'＃postcodes'）”行目前尚不起作用...）

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

我发现这些链接可能最有用：

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键包含郊区名称，而value键包含诸如“ 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();
        }
    }
});

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 ['suburb']并返回一些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);
  ?>

可能需要更多改进，但这仅是大部分。 谢谢。