Materialize框架之form组件autocomplete控件实现
发布于 8 个月前 作者 seogko 189 次浏览 来自 分享

动态实现加载数据,html代码如下:

<div class="input-field col s12">
    <i class="material-icons prefix">textsms</i>
    <input type="text" id="autocomplete-input" class="autocomplete">
    <label for="autocomplete-input">自动完成</label>
</div>

js代码初始化

$(document).ready(function() {
    $.ajax({
        url: '/data.json',
        data: {},
        dataType: 'json',
        type: 'get',
        success: function(data) {
            $('input.autocomplete').autocomplete({
                data: data
            });
        },
        error: function(err) {
            console.log(err);
        }
    });
});

json文件内容如下:

{
    "Apple": null,
    "Microsoft": null,
    "Materialize": "http://www.materializecss.cn/res/materialize.svg",
    "google": null,
    "test": null,
    "bbbbb": null,
    "ccccc": null,
    "1234567890": null,
    "ddddddd": null
}

效果如下: QQ截图20171108151617.png

回到顶部