Having trouble getting autocomplete.js to display results after starting a third word in the search

I have been trying to use an autocomplete library from https://tarekraafat.github.io/autoComplete.js/#/ called autocomplete.js. It is working fine all the way up until I start to add a third word to the query. When I get to the third word, even after one or two characters, I get get “no results found”, but otherwise I get no errors in the console.

If you run the code below, you will see what happens.

Somehow, typing a third word into the search box is causing it to lose the data somewhere between returning the results from the API, and when it gets to resultsList.element. I see no problems with data.src. Can anyone else see any problems with this code?

Here is the code I’m using:

    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>

EDIT:
I think I figured something out. This library seems to want to search through the results on its own. It doesn’t respect the search results I feed it. As long as the words I type are together in the results, it displays them. Is there a way to keep it from doing its own sorting?