JQuery UI Autocomplete失效：输入显示全部数据无筛选问题求助

嘿，我一眼就发现问题所在啦！你的Autocomplete之所以每次都返回全部数据，是因为后端的tags.php根本没处理前端传过来的搜索关键词——jQuery UI Autocomplete在用户输入时，会自动给后端发送一个名为term的GET参数，里面就是用户当前输入的内容，你得用这个参数去数据库做模糊查询才行！

另外还有个小问题：你前端同时引入了jquery.min.js和jquery-1.12.4.js，这两个是同一个库的不同版本，会导致冲突，得删掉其中一个哦。

第一步：修复后端tags.php的查询逻辑 #

修改tags.php，加入对term参数的处理，同时做SQL注入防护：

<?php
include_once("connect.php");

// 获取前端传来的搜索关键词，默认空字符串，同时转义特殊字符防止注入
$search_term = isset($_GET['term']) ? mysqli_real_escape_string($conn, $_GET['term']) : '';

// 使用LIKE进行模糊查询，匹配包含关键词的姓名
$sql = "SELECT full_name FROM tbl_names WHERE full_name LIKE '%{$search_term}%'";
$result = mysqli_query($conn, $sql);

$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row['full_name'];
}

echo json_encode($data);
?>

如果想要更安全的写法（推荐用预处理语句彻底避免SQL注入），可以改成这样：

<?php
include_once("connect.php");

$search_term = isset($_GET['term']) ? $_GET['term'] : '';

// 预处理SQL语句
$sql = "SELECT full_name FROM tbl_names WHERE full_name LIKE ?";
$stmt = mysqli_prepare($conn, $sql);
// 构造模糊匹配的参数
$like_term = "%{$search_term}%";
// 绑定参数（s表示字符串类型）
mysqli_stmt_bind_param($stmt, "s", $like_term);
// 执行查询
mysqli_stmt_execute($stmt);
// 获取结果集
$result = mysqli_stmt_get_result($stmt);

$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row['full_name'];
}

echo json_encode($data);
// 关闭语句和连接
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

第二步：修复前端的jQuery引用冲突 #

删掉重复的jQuery文件引用，保留一个即可，比如：

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

这样修改之后，当你在输入框里打字时，Autocomplete就会带着用户输入的关键词去后端查询，只返回匹配的结果啦！

内容的提问来源于stack exchange，提问作者James Arvin Rozul