autocomplete.js无结果提示报错：autoCompleteJS未定义（Laravel+AlpineJS）

这个问题的核心是你没有在当前作用域中保存autocomplete实例的引用，导致noResults回调函数内部无法找到autoCompleteJS变量。下面是具体的解决方法：

原因分析 #

你直接通过new autoComplete({...})创建了实例，但没有把这个实例赋值给一个变量，而noResults回调内部需要引用这个实例来调用generateList和访问结果列表的ID，所以会抛出未定义的错误。

两种可行的解决方案 #

方案1：保存实例到变量 #

把创建的autocomplete实例赋值给一个变量，这样回调内部就能直接访问到它：

@section('script')
<script type="text/javascript">
// 把实例赋值给autoCompleteJS变量
const autoCompleteJS = new autoComplete({
    data: {
        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) => {
        if (a.match < b.match) return -1;
        if (a.match > b.match) return 1;
        return 0;
    },
    placeHolder: "Items...",
    selector: "#autoComplete",
    observer: true,
    debounce: 300,
    searchEngine: "strict",
    resultsList: {
        container: source => {
            source.setAttribute("id", "permissions");
        },
        destination: "#autoComplete",
        position: "afterend",
        element: "ul"
    },
    maxResults: 5,
    highlight: true,
    resultItem: {
        content: (data, source) => {
            source.innerHTML = data.match;
        },
        element: "li"
    },
    noResults: (dataFeedback, generateList) => {
        // 现在autoCompleteJS是我们定义的变量，可以正常访问
        generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
        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 => {
        console.log(feedback.selection.value);
    }
});
</script>
@endsection

方案2：使用回调参数中的实例引用 #

autocomplete.js的noResults回调第一个参数dataFeedback里包含了当前实例的引用（dataFeedback.instance），你可以直接用这个引用，不用额外定义变量，这样更稳妥：

noResults: (dataFeedback, generateList) => {
    // 使用dataFeedback.instance代替autoCompleteJS
    generateList(dataFeedback.instance, dataFeedback, dataFeedback.results);
    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(`#${dataFeedback.instance.resultsList.idName}`).appendChild(result);
},

为什么这个方法有效？ #

• 方案1通过把实例保存到当前作用域的变量中，让回调函数可以访问到这个实例；
• 方案2利用autocomplete.js提供的回调参数，直接获取实例引用，避免了作用域的问题，推荐这种方式，因为它不需要依赖外部变量。

内容的提问来源于stack exchange，提问作者Kieran