autocomplete.js autoCompleteJS 未定義

Question

（autocomplete.js 頁面說要標記“autocomplete.js”，但該標記不存在）

所以我正在嘗試設置 autocomplete.js 以用於我的項目（Laravel 和 AlpineJS）。 從他們的網站復制示例開始。

搜索工作正常，但是，“未找到結果”正在觸發錯誤。

Uncaught (in promise) ReferenceError: autoCompleteJS is not defined

這是我的代碼：

<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

沒有結果時觸發的錯誤在此部分：

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

尤其是：

generateList(autoCompleteJS, dataFeedback, dataFeedback.results);

和

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

問題似乎是在autoCompleteJS中找不到 autoCompleteJS。

我的強項是更多的后端/php，所以我對 javascript 承諾和所有這些不是很熟悉，而且我找不到任何其他有類似問題的帖子。 這可能是我忽略的一些簡單的事情：/

Answer 1

所以問題很簡單...

第一個是他們的示例代碼在new autoComplete段前面缺少一個const autoCompleteJS = ...

第二個是由於某種原因， autoCompleteJS.resultsList.idName ，雖然正確，但該元素在 class 中應用名稱而不是作為 ID，所以我不得不將#更改為 a . ...現在似乎或多或少正在工作