Vue Autocomplete 自动完成功能简单实现

1.样式页面代码

<el-form-item label="商品编码" prop="shopCode">
     <el-autocomplete class="inline-input" v-model="form.shopCode"
         value-key="shopCode"
         :fetch-suggestions="shopSearch"
         placeholder="请输入商品编码"
         :trigger-on-focus="false" 
        @select="handleSelect"
         style="width: 100%" >
     </el-autocomplete>
</el-form-item>

    说明：1.输入建议对象中用于显示的键名,组件默认的键名是value。
               2.返回输入建议的方法，仅当你的输入建议数据 resolve 时，
                  通过调用 callback(data:[]) 来返回它。
               3.当选中后，触发的方法。

2.js代码

export default {
    created() {
        //调用获取数据的接口
        this.getShopList();
    }
    methods{
        //获取数据的接口
        getShopList() {
            getShopByCode().then(response => {
                this.shopList = response.data;
                console.log(this.shopList)
              })
           },

       shopSearch(queryString, cb) {
             var shopList = this.shopList;
             var results = queryString ? shopList.filter(this.createFilter(queryString)) :  shopList;
             // 调用 callback 返回建议列表的数据
             console.log(results); cb(results);
        },
         handleSelect(item) {
              this.form = {};
              this.form = item;
              console.log(item);
        },
        createFilter(queryString) {
             return (shopList) => {
                 return (shopList.shopCode.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                 };
            }
    }
}

3.实际效果演示

转载至：Vue Autocomplete 自动完成功能简单实现 | MorningStar