ElementUI实现input框的远程搜索实时下拉框展示搜索值

1.element是可以实现input框远程搜索服务器相关数据实时下拉框展示数据

相关的官网链接：http://element-cn.eleme.io/#/zh-CN/component/input

 

2.前端页面

 

 

<el-autocomplete
        v-model="name"
        :fetch-suggestions="querySearch"
        placeholder="请输入名称"
        :trigger-on-focus="false"
></el-autocomplete>

说明：fetch-suggestions：返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它（搜索和回显方法）

           trigger-on-focus：是否在输入框 focus 时显示建议列表（如果为true的时候则获取焦点就请求后台方法取相应数据，反之则是在输入内容后再触发搜索按钮）

3.js的方法

 

querySearch:function(queryString, cb) {
    $.ajax({
        type: "POST",
        url: baseURL + "/mgt/info/listAuto",
        dataType:"json",
        data: {"value":queryString},
        success: function (result) {
            if (result.code == 0) {
                var restaurants = vm.restaurants;
                // 调用 callback 返回建议列表的数据
                cb(restaurants);
            } else {
                alert(result.msg);
            }
        }
    });

},

说明：其中URL请求后台查询方法后返回的数据直接通过cb()方法回填数据。需要注意的是返回的数据中要有value属性值，并且value值就是下拉框回显展示的值。