php - Jquery 自动完成和 PHP : populating input field with data from mySQL database based on selected option in autocomplete field

Question

我正在尝试根据用户从 jQuery 自动完成字段中选择的郊区选项，使用 mySQL 数据库中的数据填充邮政编码(即邮政编码)输入字段。

自动完成工作正常 - 根据用户输入的术语检索过滤后的郊区列表。源引用是一个 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”的字符串，因此一次选择正确的集合数据，解决多个城镇/郊区的问题异地同名，回调解决。

选择后，郊区 (id)、州和 pcode 值将被注入(inject)匹配参数。

以下代码还缓存以前的结果(并且缓存在家庭和工作查找之间共享)。

$('#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();
        }
    }
});