自动完成 Jquery UI 不适用于 JSON

Question

我的 jqueryUI 自动完成功能有问题。

这是我的脚本的代码。

<script src="jquery.min.js"></script>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script type="text/javascript">
$(function (){
  $("#names").autocomplete({
    source: "tags.php"
  });
});
</script>

这是我的 tags.php 的代码

<?php
  include_once("connect.php");
  $sql = "SELECT full_name FROM tbl_names";
  $result = mysqli_query($conn, $sql);
  $data = array();
  while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row['full_name'];
  }
  echo json_encode($data);
?>

这是我的 connect.php 的代码：

<?php
  $server = "localhost";
  $username = "root";
  $password = "";
  $database = "yrock_attendance";
  $conn = mysqli_connect($server, $username, $password, $database);
  if (!$conn) {
    die("Connection failed!");
  }
?>

这是我的 tags.php 输出的一部分

["ABANEZ, JAMICHA","ABANI, MART JOSEPH","ABINION, KARL AXEL ","ABLAO, YZEL RONNELAINE","ACIDELLA, MARY GRACE","ACUNA, NATH MIGUEL"]

每次我在输入框中键入时，它都会显示我的所有数据，并且不会过滤任何内容。

Answer 1

如果您查看：

字符串：当使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一台主机上，也可以在不同的主机上（必须支持 CORS）。自动完成插件不会过滤结果，而是添加一个带有术语字段的查询字符串，服务器端脚本应该使用它来过滤结果。例如，如果源选项设置为"http://example.com" 并且用户键入foo，则会向http://example.com?term=foo 发出GET 请求。数据本身可以采用与上述本地数据相同的格式。

因此，您需要自己在 SQL 或 JavaScript 中对结果数据进行过滤。下面是一个 SQL 示例：

<?php
  include_once("connect.php");
  $term = mysqli_real_escape_string($con, $_GET['term']);
  $sql = "SELECT full_name FROM tbl_names WHERE full_name LIKE '$term%';";
  $result = mysqli_query($conn, $sql);
  $data = array();
  while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row['full_name'];
  }
  echo json_encode($data);
?>

对于这个基本示例，我使用了mysqli_real_escape_string()，但最好使用准备好的语句。查看更多：https://www.php.net/manual/en/security.database.sql-injection.php