jQueryUI 使用 PHP 和 JSON 自动完成

Question

我有一个简单的搜索框，它将从我的数据库中的可用条目中设置用户的位置。我正在尝试让 jQuery UI 的自动完成功能正常工作，但遇到了问题。在 Chrome 中打开 JavaScript 控制台后，当我开始键入时，我看不到脚本的任何响应。

所需的结果是一个下拉式自动完成列表，其中列出了“城市、州”格式的城市。我在 SO 上查看了几篇文章，并多次尝试修改我的代码来解决这个问题，但没有运气。提前感谢任何指导/修复。非常感谢。

这是我的 jQuery UI 代码（我使用的是 code.jquery.com 托管的最新库）

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

这是我的表单代码：

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

Answer 1

感谢所有帮助。我对 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;
?>

Answer 2

您正在使用的自动完成功能不会像您在 <input type="text" name="locale" id="locale" class="textbox"> 中预期的那样使用查询字符串进行 ajax 调用

为它工作改变

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

到

$q = "SELECT `city`, `state` FROM `locales`";

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

Answer 3

需要状态值的第一个文字..

"{'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>