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 在函数内部找不到。

我的强项是 backend/php，所以我对 javascript promises 之类的不是很熟悉，而且我没能找到任何其他有类似问题的帖子。这可能是我忽略的简单事情：/

Answer 1

所以问题很简单...

第一个是他们的示例代码在 new autoComplete 段前面缺少一个 const autoCompleteJS = ...

2nd 出于某种原因，autoCompleteJS.resultsList.idName，虽然正确，但元素在 class 中应用名称而不是作为 ID，因此我不得不更改 # ....现在似乎或多或少正在工作

autocomplete.js autoCompleteJS 未定义

autocomplete.js autoCompleteJS is not defined

javascript

autocomplete