MaterializeCSS onAutocomplete回调函数无法触发的原生JS解决方案咨询

问题原因 #

你调用M.Autocomplete.init初始化组件时参数格式不符合Materialize v1.x的原生API规范：该方法仅接收2个入参，第一个为目标DOM元素，第二个是包含所有配置项的单个对象。你当前将onAutocomplete配置拆分到了第三个独立对象中，框架无法识别该参数，因此回调不会被触发。

修复后的JS代码 #

function populateWords(words){
    var autoComplete = document.getElementById("autocompleteField");
    // 所有配置项放在同一个对象内
    M.Autocomplete.init(autoComplete, {
        data: words,
        onAutocomplete: function(selectedText) {
            // selectedText为用户选中的补全文本，可直接用于后续字段填充
            console.log("选中内容：", selectedText);
        }
    });
}

额外注意事项 #

如果你的populateWords函数会被多次调用更新补全数据，建议在初始化前先销毁已存在的组件实例，避免重复初始化导致异常：

function populateWords(words){
    var autoComplete = document.getElementById("autocompleteField");
    // 先销毁已有实例
    var oldInstance = M.Autocomplete.getInstance(autoComplete);
    if (oldInstance) {
        oldInstance.destroy();
    }
    // 重新初始化
    M.Autocomplete.init(autoComplete, {
        data: words,
        onAutocomplete: function(selectedText) {
            console.log("选中内容：", selectedText);
        }
    });
}

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