jQuery Autocomplete响应数据过滤问题：输入时未筛选结果

嘿，问题一眼就能看出来——你的source回调函数完全没做过滤逻辑！现在不管用户输入什么内容，你都把所有autocompleteTerms项原样返回了，自然不会有实时筛选的效果。

修正后的完整代码 #

jQuery(document).ready(function($) {
    var autocompleteTerms = JSON.parse(posts);
    $('#post-search').autocomplete({
        minLength: 2,
        source: function (request, response) {
            // 第一步：根据用户输入的关键词过滤匹配项
            var filteredItems = $.grep(autocompleteTerms, function(item) {
                // 不区分大小写检查标题是否包含输入内容
                return item.post_title.toLowerCase().includes(request.term.toLowerCase());
            });
            // 第二步：把过滤后的项转换成Autocomplete需要的格式
            response($.map(filteredItems, function (value) {
                return {
                    label: value.post_title,
                    value: value.ID,
                    post_title: value.post_title // 额外保留原标题，方便后续回调使用
                }
            }));
        },
        focus: function(event, ui) {
            // 这里注意：ui.item的label就是我们定义的post_title，用这个更稳妥
            $('#post-search').val(ui.item.label);
            return false;
        },
        change: function (event, ui) {
            // 你的原有逻辑...
        }
    });
});

关键修改说明 #

• 新增过滤逻辑：用$.grep遍历原始数据，根据用户输入的request.term（输入框实时内容）筛选出标题包含关键词的项，这是实现筛选的核心。
• 修复focus回调的属性引用：原来的ui.item.post_title会报错，因为你返回的对象里默认只有label和value，要么用ui.item.label，要么像代码里那样把post_title也加到返回对象里。
• 不区分大小写匹配：通过toLowerCase()统一转换大小写，避免因为大小写差异导致匹配失效。

这样修改后，当用户输入内容时，Autocomplete就会实时显示符合关键词的结果了。

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