jQueryUI使用PHP和JSON自动完成

我有一个简单的搜索框，可以根据数据库中的可用条目设置用户的位置。我试图让jQueryUI的自动完成工作，但遇到了一些问题。在Chrome中打开JavaScript控制台后，当我开始键入时，我看不到脚本的响应

理想的结果是一个下拉式自动完成列表，以“城市，州”格式列出城市。我已经在这里查看了一些帖子，并且在多次尝试中修改了我的代码来解决这个问题，但是没有成功。提前感谢您的指导/修复。非常感谢

这是我的jQueryUI代码（我正在使用code.jQuery.com托管的最新库）

$（文档）.ready（函数（）
{
$（'#locale'）。自动完成(
{
来源：“./state\u autocomplete.php”，
最小长度：2
});
});

这是我的表格代码：

<form name="frm_set_locale" method="post" action="/index2.php">
  <input type="text" name="locale" id="locale" class="textbox">
  <input type="submit" class="button" name="frm_submit_locale" value="Search">
</form>

这里是提取信息的mysqli脚本

<?php
include "/includes/dbconn.php";

// Query to get the usable locations
    $locale = trim($_GET['term']);
    $return = array();

    $q = "SELECT `city`, `state` FROM `locales` WHERE `city` LIKE '%".$locale."%'";
    $r = mysqli_query($q, $connect);

    $json = "[";
    $first = true;

    while ($row = mysqli_fetch_assoc($r, $connect)){
        if(!$first){
            $json .=  ",";
        }else{
            $first = false;
        }

        $json .= "{'value':'".$row['city'].", ".$row['state']."}";
    }

    $json .= "]";

    echo $json;
?>

---

1状态值需要一个文本

"{'value':'".$row['city'].", 'state':".$row['state']."}"

第二，您必须通过Ajax post请求数据

<script type="text/javascript">
$(document).ready(function()
{
          $.ajax({
               url: '/state_autocomplete.php',
               type: 'POST',
               dataType: 'json',
               success: function(data){
                     $('#locale').autocomplete(
                     {
                           source: data,
                           minLength: 2
                     });
               }
          });
});
</script>

$（文档）.ready（函数（）
{
$.ajax({
url:“/state\u autocomplete.php”，
键入：“POST”，
数据类型：“json”，
成功：功能（数据）{
$（'#locale'）。自动完成(
{
资料来源：数据，
最小长度：2
});
}
});
});

1状态值需要一个文本

"{'value':'".$row['city'].", 'state':".$row['state']."}"

第二，您必须通过Ajax post请求数据

<script type="text/javascript">
$(document).ready(function()
{
          $.ajax({
               url: '/state_autocomplete.php',
               type: 'POST',
               dataType: 'json',
               success: function(data){
                     $('#locale').autocomplete(
                     {
                           source: data,
                           minLength: 2
                     });
               }
          });
});
</script>

$（文档）.ready（函数（）
{
$.ajax({
url:“/state\u autocomplete.php”，
键入：“POST”，
数据类型：“json”，
成功：功能（数据）{
$（'#locale'）。自动完成(
{
资料来源：数据，
最小长度：2
});
}
});
});

您正在使用的自动完成功能不会像您在

为it工作改变

$q = "SELECT `city`, `state` FROM `locales` WHERE `city` LIKE '%".$locale."%'";

到

---

然后，脚本将生成所有城市和州，然后自动完成功能将与用户输入匹配。

您使用的自动完成功能不会像您从

为it工作改变

$q = "SELECT `city`, `state` FROM `locales` WHERE `city` LIKE '%".$locale."%'";

到

---

脚本将生成所有城市和州，然后自动完成功能将与用户输入匹配。

感谢所有帮助。我对state_autocomplete.php采用了一种新的方法，下面是它对我起作用的原因。真干净

<?php
// Database Connection
    include "/includes/dbconn.php";

// Query to get the usable locations
    $locale = $_GET['term'];

    $q = "SELECT `city`, `state` FROM `locales` WHERE `city` LIKE '%$locale%'";
    $r = mysqli_query($connect, $q);            

    $city_state = array();
    while($row = mysqli_fetch_assoc($r)){
        $result = $row['city'].", ".$row['state'];
        array_push($city_state, $result);
    }
    $json = json_encode($city_state);
    echo $json;
?>

---

谢谢你的帮助。我对state_autocomplete.php采用了一种新的方法，下面是它对我起作用的原因。真干净

<?php
// Database Connection
    include "/includes/dbconn.php";

// Query to get the usable locations
    $locale = $_GET['term'];

    $q = "SELECT `city`, `state` FROM `locales` WHERE `city` LIKE '%$locale%'";
    $r = mysqli_query($connect, $q);            

    $city_state = array();
    while($row = mysqli_fetch_assoc($r)){
        $result = $row['city'].", ".$row['state'];
        array_push($city_state, $result);
    }
    $json = json_encode($city_state);
    echo $json;
?>

您没有发布请求。post是他们从jqueryui自动完成中选择结果后的方法。从state_autocomplete.php脚本中选择的值将在用户单击submit时由用户发布。确实如此，但是您必须首先

请求
Json数据
，以
对象
的形式返回，以设置
用户界面自动完成
的源代码
请参阅下面的代码。.我很确定您生成的JSON无效--您需要一个“键”作为“状态”值。@Andrew Whitaker，这是我的想法，但我看到的所有示例都是使用SQL查询中返回的on字段的远程数据源自动完成的，因此我不确定如何添加辅助键。您没有发布请求。post是他们从jqueryui自动完成中选择结果后的方法。从state_autocomplete.php脚本中选择的值将在用户单击submit时由用户发布。确实如此，但是您必须首先
请求
Json数据
，以
对象
的形式返回，以设置
用户界面自动完成
的源代码
请参阅下面的代码。.我很确定您生成的JSON无效--您需要一个“键”作为“状态”值。@Andrew Whitaker，这是我的想法，但是我所看到的所有关于远程数据源自动完成的示例都只使用SQL查询中返回的on字段，因此我不确定如何添加辅助键。这会导致相同的错误。例如，如果我转到，我会得到一个空的结果集，即使数据库中有几个城市的名称中有“ph”，所以我想知道问题是否出在state_autocomplete.php脚本上。这会导致相同的错误。例如，如果我转到，我会得到一个空的结果集，即使数据库中有几个城市的名称中有“ph”，所以我想知道问题是否出在state_autocomplete.php脚本上。