Ajax 实时搜索无法连续工作，是因为搜索结果容器在输入清空时被隐藏（display: none），但后续响应未重新显示，导致后续结果不可见；只需在 AJAX 成功回调中显式调用 .show() 即可恢复显示。
ajax 实时搜索无法连续工作，是因为搜索结果容器在输入清空时被隐藏（`display: none`），但后续响应未重新显示，导致后续结果不可见；只需在 ajax 成功回调中显式调用 `.show()` 即可恢复显示。
在你当前的 jQuery 代码中，当用户清空搜索框时，你通过 $("#searchresult").css("display", "none") 隐藏了结果区域；然而，当用户再次输入并触发 AJAX 请求后，虽然 html(data) 正确更新了内容，但容器仍处于隐藏状态（CSS display: none 未被清除），因此新结果始终不可见——这正是“搜一次就失效”的根本原因。
✅ 正确做法：统一使用 .show() / .hide() 控制可见性
推荐将 css("display", "none") 替换为 jQuery 的 .hide() 和 .show() 方法，它们语义清晰、兼容性好，且能自动处理内联样式与 CSS 类的冲突：
$(document).ready(function() {
$("#live_search").on("keyup", function() {
var input = $(this).val().trim(); // 建议添加 trim() 防止空格干扰
if (input !== "") {
$.ajax({
url: "livesearch.php",
method: "POST",
data: { input: input },
dataType: "html",
success: function(data) {
$("#searchresult").html(data).show(); // 更新内容 + 确保显示
},
error: function() {
$("#searchresult").html("<p class="text-danger">搜索请求失败，请重试。</p>").show();
}
});
} else {
$("#searchresult").hide(); // 清空时隐藏，简洁可靠
}
});
});
⚠️ 同时需优化 PHP 端的安全性与逻辑
你当前的 PHP 查询存在严重 SQL 注入风险（直接拼接 $input），且 LIKE 用法不支持模糊匹配（应使用 %{$input}%）。请立即修正：
<?php include('our/db_connect.php');
if (isset($_POST['input'])) {
$input = mysqli_real_escape_string($conn, $_POST['input']);
// ✅ 使用 %...% 实现模糊搜索（如输入"ABC"可匹配"ABC123"、"XABCY"）
$query = "SELECT * FROM parcels WHERE reference_number LIKE '%" . $input . "%'";
$result = mysqli_query($conn, $query);
if ($result && mysqli_num_rows($result) > 0) {
echo '
| tracking num | sender contact | From | To |
|---|---|---|---|
| {$row['reference_number']} | {$row['sender_name']} | {$row['from_branch_id']} | {$row['to_branch_id']} |
'; } else { echo '
No Parcel Found
'; } } else { echo '
Please enter a search term.
'; } ?>
? 额外建议（提升体验与健壮性）
-
防抖处理：避免高频请求，可在
keyup中加入setTimeout防抖（延迟 300ms 发送）； - 空结果兜底：PHP 返回空表格时，前端应显示友好提示而非空白；
-
加载状态：可添加
.text("Searching...")或 loading spinner 提升反馈感； -
键盘事件优化：监听
input事件比keyup更全面（兼容粘贴、语音输入等）。
只要确保容器在每次成功响应后显式 .show()，并配合服务端安全查询，你的实时搜索即可稳定运行，无需刷新页面。
