在搜索中开始第三个单词后，无法让 autocomplete.js 显示结果

Question

我一直在尝试使用来自 https://tarekraafat.github.io/autoComplete.js/#/ 的自动完成库，称为 autocomplete.js。 它一直工作正常，直到我开始向查询添加第三个单词。 当我到达第三个单词时，即使在一两个字符之后，我也会收到“未找到结果”的信息，但除此之外，我在控制台中不会收到任何错误。

如果运行下面的代码，您将看到会发生什么。

不知何故，在搜索框中输入第三个单词会导致它在从 API 返回结果和到达 resultsList.element 之间的某个位置丢失数据。 我发现 data.src 没有问题。 其他人能看到这段代码有什么问题吗？

这是我正在使用的代码：

    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);
        }
    });

<link href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/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>

编辑： 我想我明白了一些事情。 这个图书馆似乎想自己搜索结果。 它不尊重我提供给它的搜索结果。 只要我输入的单词在结果中在一起，它就会显示它们。 有没有办法阻止它自己排序？

Answer 1

我想通了。 正如我所怀疑的，这个库尝试对我已经在 API 中过滤的结果进行自己的搜索。 它的搜索不如我的智能，因此如果我键入“Alan Jackson Jukebox”，它会阻止结果，而我的搜索会识别它。

无论如何，他们没有办法直接禁用它，但你可以放入一个返回 true 的函数。 不，由于某种原因将其直接设置为 true 是行不通的。 将其设置为“宽松”也不起作用。

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
        },
        searchEngine: (query, record) => {
            return true
        },
        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);
        }
    });

<link href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js"></script>
<h4>Search Songs</h4>
<div id="autocomplete" class="autocomplete">
    <input id="autoComplete" type="text" placeholder="Search Karaoke">
    <ul class="autocomplete-result-list"></ul>
</div>