Jquery autocomplete和PHP：根据autocomplete字段中选择的选项，使用来自mySQL数据库的数据填充输入字段

我试图使用mySQL数据库中的数据填充Postcode（即zipcode）输入字段，这是基于用户从jQuery自动完成字段中选择的选项

autocomplete工作正常-根据用户输入的术语检索过滤后的列表。源引用是一个PHP文件。但我不知道如何使用用户选择的选项回拨数据库以检索邮政编码。可能在第一次调用中可以检索到邮政编码，与郊区相同：除了我不想要所有的邮政编码，只想要用户最终选择的邮政编码

我的jQuery如下所示：“$（'#postcodes'）”行还不起作用…）

//自动完成
$（函数（）{
$（“#郊区”）。自动完成({
来源：“allsuburbies.php”，
最小长度：3，
选择：功能（事件、用户界面）{
$（“#邮政编码”）.val（ui.item.postcode）；
},
});
});

相关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（all.PHP）：

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

（这对我最初有所帮助）

（这与我的问题最为接近，尽管它使用基于州选择的一系列zipcode填充zipcode或postcode字段，而不是基于一个郊区/城市的单个zipcode）

谢谢你的帮助。 谢谢你，

---

Andrew

在您的

函数中选择您想要触发另一个ajax请求的
。这个新的ajax请求将当前选择的郊区发送到另一个php脚本，该脚本将返回该郊区的邮政编码。在与此ajax请求相关联的回调中，将返回的邮政编码填写到表单中

您需要使用jQuery.get启动新的ajax请求：

postcodes.php将获取$_GET['suburban']，并返回一些包含该郊区邮政编码的json结构。
在
选择
函数中，您将希望触发另一个ajax请求。这个新的ajax请求将当前选择的郊区发送到另一个php脚本，该脚本将返回该郊区的邮政编码。在与此ajax请求相关联的回调中，将返回的邮政编码填写到表单中

您需要使用jQuery.get启动新的ajax请求：

postcodes.php将获取$_GET['suburban']，并返回一些包含该郊区邮政编码的json结构。
我已经将此函数构建到我的一个应用程序中。这里还有一层复杂性，即有两个郊区查找（家庭和工作地址），每个查找填充匹配的州和邮政编码字段。后端是perl而不是PHP，但这与客户端处理无关。最终，后端将返回一个JSON结构，其中包含如下哈希数组：

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

id键包含郊区名称，值键包含“JOLIET IL 60403”之类的字符串，因此只需选择一次正确的数据集，即可解决多个城镇/郊区在不同地方同名的问题，并进行回调以解决此问题

选择后，郊区（id）、状态和pcode值将注入匹配参数

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

我已经在我的应用程序中构建了这个函数。这里还有一层复杂性，即有两个郊区查找（家庭和工作地址），每个查找填充匹配的州和邮政编码字段。后端是perl而不是PHP，但这与客户端处理无关。最终，后端将返回一个JSON结构，其中包含如下哈希数组：

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

id键包含郊区名称，值键包含“JOLIET IL 60403”之类的字符串，因此只需选择一次正确的数据集，即可解决多个城镇/郊区在不同地方同名的问题，并进行回调以解决此问题

选择后，郊区（id）、状态和pcode值将注入匹配参数

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

我想出来了。谢谢大家

我还发现以下内容与我所追求的非常接近：


相关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>


$（文档）.ready（函数（）{
变量ac_配置={
来源：“SuburbStatePostcodeRetriever.php”，
选择：功能（事件、用户界面）{
$（“#郊区”）.val（ui.item.locality）；
$（“#state”）.val（ui.item.state）；
$（“#邮政编码”）.val（ui.item.postcode）；
},
最小长度：3
};
$（“#郊区”）.autocomplete（ac#U配置）；
});

HTML:


郊区


状态


邮政编码



PHP:

我想出来了。谢谢大家

我还发现以下内容与我所追求的非常接近：


相关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>


$（文档）.ready（函数（）{
变量ac_配置={
来源：“SuburbStatePostcodeRetriever.php”，
选择：功能（事件、用户界面）{
$（“#郊区”）.val（ui.item.locality）；
$（“#state”）.val（ui.item.state）；
$（“#邮政编码”）.val（ui.item.postcode）；
},
最小长度：3
};
$（“#郊区”）.autocomplete（ac#U配置）；
});

HTML:


郊区


状态


邮政编码



PHP:

重要的是，尽管对autocomplete的AJAX调用必须返回
id
和
value
，但不限于这些属性。我还将返回
state
和
postcode
，以更改其他表单元素
$('#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();
        }
    }
});

  <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>

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