autocomplete.js输入第三个单词后无法显示搜索结果求助

问题现象 #

使用autocomplete.js库时，输入前两个单词（如"Don't Rock"）能正常显示匹配结果，但输入第三个单词的部分字符（如"Don't Rock Al"）时，会直接显示"No results found"，控制台无任何报错。进一步发现该库默认的搜索逻辑要求输入的单词必须连续出现在结果项中，且会自动对结果排序，希望调整匹配逻辑并关闭自带排序。

复现代码 #

JavaScript代码 #

const autoCompleteJS = new autoComplete({
    selector: "#autoComplete",
    data: {
        src: [
            "Don't Rock The Jukebox - Alan Jackson [CB Karaoke]",
            "Don't Rock The Jukebox - Alan Jackson [NU Karaoke]",
            "Don't Rock The Jukebox - Alan Jackson [DK Karaoke]",
            "Don't Rock The Jukebox - Alan Jackson [SC Karaoke]",
            "Don't Rock The Jukebox - Alan Jackson [P Karaoke]"
        ],
        cache: false // Disable caching for dynamic data
    },
    threshold: 3, // Minimum number of characters before the autocomplete starts
    debounce: 300, // Wait 300ms before fetching the data
    resultsList: {
        element: (list, data) => {
            // Display "No Results" message when no results are found
            if (!data.results.length) {
                console.log("no results");
                const message = document.createElement("div");
                message.setAttribute("class", "no_results");
                message.innerHTML = `<span>No results found</span>`;
                list.appendChild(message);
            }
        },
        maxResults: 10, // Maximum number of results to show
        noResults: true
    },
    resultItem: {
        highlight: true,
        element: (item, data) => {
            console.log("data: " + data)
            // Display the result item
            item.innerHTML = `<span>${data.value}</span>`;
        }
    },
    onSelection: (feedback) => {
        const selection = feedback.selection.value;
        document.querySelector("#autoComplete").value = selection;
        console.log("Selected item:", selection);
    }
});

HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
<div class="container mt-5 pt-5 col-md-5">
    <h4>Search Songs</h4>
    <div id="autocomplete" class="autocomplete">
        <input id="autoComplete" type="text" placeholder="Search Karaoke">
        <ul class="autocomplete-result-list"></ul>
    </div>
</div>

解决方案 #

核心修改点 #

1. 自定义匹配逻辑：通过data.filter函数实现全局模糊匹配，不要求输入的单词连续出现
2. 关闭默认排序：添加sort: false配置项，禁用库自带的结果排序

修改后的完整JavaScript代码 #

const autoCompleteJS = new autoComplete({
    selector: "#autoComplete",
    data: {
        src: [
            "Don't Rock The Jukebox - Alan Jackson [CB Karaoke]",
            "Don't Rock The Jukebox - Alan Jackson [NU Karaoke]",
            "Don't Rock The Jukebox - Alan Jackson [DK Karaoke]",
            "Don't Rock The Jukebox - Alan Jackson [SC Karaoke]",
            "Don't Rock The Jukebox - Alan Jackson [P Karaoke]"
        ],
        cache: false,
        // 自定义模糊匹配逻辑
        filter: (list, query) => {
            return list.filter(item => 
                item.toLowerCase().includes(query.toLowerCase())
            );
        }
    },
    threshold: 3,
    debounce: 300,
    sort: false, // 关闭自带排序
    resultsList: {
        element: (list, data) => {
            if (!data.results.length) {
                console.log("no results");
                const message = document.createElement("div");
                message.setAttribute("class", "no_results");
                message.innerHTML = `<span>No results found</span>`;
                list.appendChild(message);
            }
        },
        maxResults: 10,
        noResults: true
    },
    resultItem: {
        highlight: true,
        element: (item, data) => {
            item.innerHTML = `<span>${data.value}</span>`;
        }
    },
    onSelection: (feedback) => {
        const selection = feedback.selection.value;
        document.querySelector("#autoComplete").value = selection;
        console.log("Selected item:", selection);
    }
});

说明 #

• 自定义的filter函数会遍历所有数据源项，检查输入的关键词（不区分大小写）是否存在于项的任意位置，实现全局模糊匹配
• sort: false会完全禁用库的默认排序逻辑，结果将按照你传入的数据源顺序展示
• 修改后输入第三个单词的部分字符（如"Don't Rock Al"），就能正常匹配到所有符合条件的结果，不会再出现无结果的情况

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