如何实现JQuery Autocomplete多关键词匹配外部TXT数据源？

原代码使用$.ui.autocomplete.filter默认只会匹配包含完整连续输入字符串的条目，无法处理拆分的多关键词（比如"el can"）。要实现多关键词匹配，需自定义过滤逻辑，逐条检查条目是否包含所有输入的关键词（忽略大小写）。

修改后的完整实现代码 #

输入框部分无需改动：

<input type="text" id="Textbox_6175_1">

脚本部分替换过滤逻辑：

<script>
$.ajax({
    url: "path-to-file.txt",
    dataType: "text",
    success: function(data) {
        var autoCompleteData = data.split('\n');
        $("#Textbox_6175_1").autocomplete({
            source: function(request, response) {
                // 拆分输入为多个关键词，过滤空字符串
                var terms = request.term.split(/\s+/).filter(term => term.trim() !== '');
                
                // 自定义过滤：条目需包含所有关键词（不区分大小写）
                var results = autoCompleteData.filter(item => {
                    var itemLower = item.toLowerCase();
                    return terms.every(term => itemLower.includes(term.toLowerCase()));
                });
                
                // 返回最多20条结果
                response(results.slice(0, 20));
            },
            // 确保无匹配时允许用户自由输入
            minLength: 0
        });
    }
});
</script>

关键改动说明 #

• 关键词拆分：用split(/\s+/)按任意数量空格分割输入内容，再过滤掉空项，避免无效匹配。
• 多关键词校验：使用Array.prototype.every确保每个关键词都存在于条目（统一转小写实现大小写不敏感匹配）。
• 保留原功能：依然从TXT文件加载数据源，限制返回20条结果，且minLength:0配合无匹配时返回空数组，允许用户输入任意内容。

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