Question

这是我的HTML页面。

<form action="" method="post">
    <input type="text" class="auto" name="search" autocomplete="off">
</form>
<script>
  $(document).ready(function($){
    $('.auto').autocomplete({
    source:'connect.php', 
    minLength:1
    });
});
</script>

这是我的connect.php

if(isset($_GET['term'])) {
  require "db.php";

  $con = mysqli_connect("$host","$user","$password","$db");

  if (mysqli_connect_errno())
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

  $term = mysqli_real_escape_string($con, $_GET['term']);
  $term = strtolower($term);
  $query = "SELECT `name` FROM `products` WHERE `name` LIKE '%$term%'";
  $result = mysqli_query($con, $query);
  $return_array = array();
    while($row = mysqli_fetch_array($result)) {

        $return_array[] = $row;
    }
    echo json_encode($return_array);
}

使用chrome工具检查响应，如下所示：

[{"0":"MacBook Pro 13-inch","name":"MacBook Pro 13-inch"},{"0":"MacBook Pro 15-inch","name":"MacBook Pro 15-inch"},{"0":"MacBook Air 13-inch","name":"MacBook Air 13-inch"},{"0":"MacBook Air 11-inch","name":"MacBook Air 11-inch"},{"0":"iMac 21.5-inch","name":"iMac 21.5-inch"},{"0":"iMac 27-inch","name":"iMac 27-inch"},{"0":"Mac Pro Quad-Core","name":"Mac Pro Quad-Core"},{"0":"Mac Pro 6-Core","name":"Mac Pro 6-Core"}]

但是在页面上，我得到“没有搜索结果。”

我已经搜索了很多东西，我认为这与json输出的方式有关，但我不确定。我不想使用ajax方法。

请不要PDO，因为我只能理解基本的程序代码。

Answer 1

正如rodrigogq已经指出的那样，jQuery UI自动完成以两种形式接受数据，

字符串数组：

[ "value1", "value2" ]

或具有标签和值属性的对象数组：

[  { label:"value1", value:0},  { label:"value2", value:1}, ]

您有两种选择：修改服务器端脚本以提供正确的响应，

或

修改客户端脚本以清理服务器响应。

以下是后者，根据您分享的回复：

$(document).ready(function($){
  $('.auto').autocomplete({
    source: function(request, response) {
      $.get('connect.php', { term: request.term }, function(data) {
        var matches = $.map($.parseJSON(data),function(obj){
          return obj.name;
        });
        response(matches);
      });
    }, 
    minLength:1
  });
});

Answer 2

$(document).ready(function($){是什么意思？它应该是$(document).ready(function(){（请注意$）。

另外，请尝试将完整网址发送到source选项，例如http://www.yoursite.com/connect.php。

修改

另请阅读：http://api.jqueryui.com/autocomplete/#option-source

如您所见，您可以将数组提供为：

[ "value1", "value2" ]

或者：

[ { label:"value1", value:0}, { label:"value2", value:1}, ]

Answer 3

让您了解出了什么问题：使用您的代码：

$(document).ready(function(){
    $('.auto').autocomplete({
        source:'test1.php',
        minLength:1
    });
});

和这个虚拟的PHP文件test1.php：

echo json_encode(array('alpha', 'alphabet', 'beta'));

自动完成工作正常。所以：你必须改变：

   while($row = mysqli_fetch_array($result)) {
        $return_array[] = $row;
    }
    echo json_encode($return_array);

成：

   while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
        $return_array[] = $row['name'];
    }
    echo json_encode($return_array);

这个自动完成脚本有什么问题？

3 个答案: