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

需要第一个国家文学价值..

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

Answer 2

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

您正在使用的自动完成功能不会按照您的意图从<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`";

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

使用PHP和JSON的jQueryUI自动完成

3 个答案: