jQuery UI 自动完成 - 未找到结果

Posted 2023-05-09

【中文标题】jQuery UI 自动完成 - 未找到结果

【英文标题】：jQuery UI Autocomplete - No results found

【发布时间】：2015-01-28 00:07:05

【问题描述】：

我有以下

<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 我知道我必须在将 $term 输入到我的查询之前对其进行清理。

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 = $_GET['term'];
  $query = "SELECT `name` FROM `products` WHERE `name` LIKE '%$term%'";
  $result = mysqli_query($con, $query);

  while ($row = mysqli_fetch_array($result)) 
    echo json_encode($row);
  

如果我在输入字段中输入 M 并使用 chrome 工具检查响应，我会得到这个。

"0":"MacBook Pro 13 英寸","name":"MacBook Pro 13 英寸""0":"MacBook Pro 15 英寸","名称":"MacBook Pro 15 英寸""0":"MacBook Air 13 英寸","名称":"MacBook Air 13 英寸""0":"MacBook Air 11 英寸","名称":"MacBook Air 11 英寸""0":"iMac 21.5 英寸","名称":"iMac 21.5 英寸""0":"iMac 27 英寸","名称":"iMac 27 英寸""0":"Mac Pro 四核","name":"Mac Pro 四核""0":"Mac Pro 6-Core","name":"Mac Pro 6-Core"

但是，由于某种原因，它在页面上显示“未找到结果”，即使有？

【参考方案1】：

您的 php 脚本创建的输出不是有效的 json - 您必须将各个对象包装在一个数组中：

["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"]

像这样修改你的 PHP 脚本：

$result = array();
while ($row = mysqli_fetch_array($result)) 
    $result[] = $row;
  

json_encode($result);

除此之外 - 您的输出应该具有属性 id、值和标签，而不仅仅是“0”。

【讨论】：

$result = mysqli_query($con, $query); 您的方法会覆盖它，然后 while 循环失败。如果我将 $result = array(); 更改为 $results，则会收到内部服务器错误 500