Laravel框架下Ajax实现搜索自动补全时html()显单条、append()结果重复问题

问题根因 #

• 调用.html()仅展示单条数据：.html()会覆盖目标元素的全部内容，你在遍历接口返回数据的循环中重复调用该方法，每一次遍历都会清空上一次渲染的内容，最终仅保留最后一条匹配数据。
• 调用.append()出现结果叠加：每次触发搜索请求、新结果返回前，没有清空容器内的旧搜索结果，新内容直接追加在旧内容之后，导致重复展示。

修复代码 #

1. 前端Ajax逻辑修复 #

核心改动：每次渲染前先清空容器，先拼接所有结果的HTML字符串后再一次性写入DOM，同时修复原代码中a标签的语法错误，优化DOM操作性能。

$("#search-eng").keyup(function() {
    let search_query = $(this).val().trim();
    if (search_query != "") {
        $.ajax({
            url: '{{ url('/appointment/calander_patient_search') }}/' + search_query,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // 先清空旧内容再显示容器
                const $list = $("#search-eng-show-list");
                $list.empty().show();
                let resultHtml = '';

                if (data.length > 0) {
                    // 循环拼接所有匹配结果
                    $.each(data, function(key, value) {
                        resultHtml += `<a data-id="${value.id}">${value.second_name}</a>`;
                    });
                } else {
                    resultHtml = '<a><i></i>No Record</a>';
                }
                // 一次性写入全部内容
                $list.html(resultHtml);
            },
        });
    } else {
        $("#search-eng-show-list").empty().hide();
    }
});

2. 后端控制器逻辑优化 #

原查询逻辑存在两个可优化点：一是select字段没有包含前端渲染需要的second_name，会导致前端取不到对应字段值；二是多条件模糊查询没有分组，存在逻辑优先级问题。

$patient = Patient::select('id', 'avatar', 'second_name')
    ->where(function($query) use ($search_query) {
        $query->where('phone_number', 'like', '%' . $search_query . '%')
              ->orWhere('first_name', 'like', '%' . $search_query . '%');
    })
    ->limit(15)
    ->get();
return $patient;

内容的提问来源于stack exchange，提问作者Shady Hesham