如何为Materialize框架Autocomplete自动完成输入框设置默认值

你遇到的问题核心有两点：

1. 异步AJAX请求和autocomplete组件初始化的时序错误，你当前在请求发起后立刻初始化组件，此时后端返回的数据源还未加载完成
2. Materialize的表单组件有自有状态管理，直接用jQuery的val()方法只会修改DOM的原始值，不会同步组件状态和联动的label上浮样式

• 把autocomplete初始化逻辑挪到AJAX的success回调末尾，保证数据源keyValues加载完成后再初始化组件
• 赋值完成后调用Materialize提供的表单状态更新方法，同步label的显示状态
• 如果需要触发选中后的业务回调，赋值后手动调用一次回调函数即可

HTML 无需修改 #

<div class="input-field col s12">
    <label for="autocompleteInput">Chainage Number</label>
    <input type="text" id="autocompleteInput">
</div>

JS 修改后代码 #

$(document).ready(function () {
    // 提前声明变量避免全局污染
    let chainageDataKeys = [];
    let chainageDataValues = [];
    let keyValues = {};
    let firstChainageVal = '';

    $.ajax({
        type: "GET",
        url: "/Vids/GetChainageNoList",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $.each(response, function (index, item) {
                if (index == 0) {
                    firstChainageVal = item.ChainageNo;
                }
                chainageDataKeys.push(item.ChainageNo);
                chainageDataValues.push(null);
            });
            for (var i = 0; i < chainageDataKeys.length; i++) {
                keyValues[chainageDataKeys[i]] = chainageDataValues[i];
            }

            // 数据加载完成后再初始化autocomplete组件
            $('#autocompleteInput').autocomplete({
                data: keyValues,
                onAutocomplete: function (val) {
                    AutoCompleteSelectHandler(val)
                },
                selectFirst: true
            });

            // 赋值第一个选项值
            $('#autocompleteInput').val(firstChainageVal);
            // 触发Materialize输入框状态更新，让label正确上浮
            M.updateTextFields();
            // 如果需要触发选中后的业务逻辑，保留下面这行即可
            AutoCompleteSelectHandler(firstChainageVal);
        }
    })
})

注意：如果你使用的是0.x版本的Materialize，将M.updateTextFields()替换为Materialize.updateTextFields()即可

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