autocomplete.js autoCompleteJS is not defined

Question

(the autocomplete.js page said to tag 'autocomplete.js', but the tag doesn't exist)

So I'm trying to setup autocomplete.js for use on my project (Laravel and AlpineJS). Copied the example from their site to start with.

The searching is working fine, however, the "no results found" is triggering errors.

Uncaught (in promise) ReferenceError: autoCompleteJS is not defined

Here is my code:

<div>
    <input type="text" id="autoComplete" tabindex="1" class="border shadow rounded"/>
</div>

@section('script')
    <script type="text/javascript">
        new autoComplete({
            data: {                              // Data src [Array, Function, Async] | (REQUIRED)
                src: [
                    {title: 'some-item',name:'First Some Item'},
                    {title: 'something-else',name:'Something else for 2'},
                    {title: 'another-thing',name:'Another Thing'}
                ],
                key: ["title", "name"],
                cache: false
            },
            sort: (a, b) => {                    // Sort rendered results ascendingly | (Optional)
                if (a.match < b.match) return -1;
                if (a.match > b.match) return 1;
                return 0;
            },
            placeHolder: "Items...",             // Place Holder text                 | (Optional)
            selector: "#autoComplete",           // Input field selector              | (Optional)
            observer: true,                      // Input field observer | (Optional)
            debounce: 300,                       // Post duration for engine to start | (Optional)
            searchEngine: "strict",              // Search Engine type/mode           | (Optional)
            resultsList: {                       // Rendered results list object      | (Optional)
                container: source => {
                    source.setAttribute("id", "permissions");
                },
                destination: "#autoComplete",
                position: "afterend",
                element: "ul"
            },
            maxResults: 5,                         // Max. number of rendered results | (Optional)
            highlight: true,                       // Highlight matching results      | (Optional)
            resultItem: {                          // Rendered result item            | (Optional)
                content: (data, source) => {
                    source.innerHTML = data.match;
                },
                element: "li"
            },
            noResults: (dataFeedback, generateList) => {
                // Generate autoComplete List
                generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
                // No Results List Item
                const result = document.createElement("li");
                result.setAttribute("class", "no_result");
                result.setAttribute("tabindex", "1");
                result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`;
                document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
            },
            onSelection: feedback => {             // Action script onSelection event | (Optional)
                console.log(feedback.selection.value);
            }
        });
    </script>
@endsection

The error triggered when there are no results is in this section:

noResults: (dataFeedback, generateList) => {
                // Generate autoComplete List
                generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
                // No Results List Item
                const result = document.createElement("li");
                result.setAttribute("class", "no_result");
                result.setAttribute("tabindex", "1");
                result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`;
                document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
            },

In particular:

generateList(autoCompleteJS, dataFeedback, dataFeedback.results);

and

document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);

The issue seems to be the autoCompleteJS is not being found inside the function.

My forte is more backend/php, so I'm not very familiar with javascript promises and all that, and I've not been able to find any other posts with a similar issue. It's probably something simple I'm overlooking:/

Answer 1

So the issue was pretty simple...

1st was their example code was missing a const autoCompleteJS = in front of the new autoComplete segment...

2nd was for some reason, the autoCompleteJS.resultsList.idName , while correct, the element was applying the name in a class instead of as an ID, so I had to change the # to a . ... Seems to more or less be working now