Vue+Element 实现 模糊搜索

首先，npm安装Element，然后导入

 

HTML 中

<el-autocomplete v-model="searchtext" size="mini" :fetch-suggestions="querySearchGroup" @select="selectGroup"
                     @input="groupListMe" placeholder="请输入准确的企业全称"></el-autocomplete>

 

JS 中

data() {
            return {
                groupArr: [],
                groupList: [{
                    companyName: \'\',
                    userId: \'\'
                }],
                searchtext: \'\'
            };
        },

watch: {
            \'searchtext\': {
                deep: true,
                handler: function(newVal, oldVal) {
                    this.groupArr = []; //这是定义好的用于存放下拉提醒框中数据的数组
                    var len = this.groupList.length; //groupList
                    var arr = [];
                    for (var i = 0; i < len; i++) { //根据输入框中的值进行模糊匹配
                        if (this.groupList[i].companyName.indexOf(this.searchtext) >= 0) {
                            arr.push({
                                value: this.groupList[i].companyName,
                                id: this.groupList[i].userId
                            })
                        }
                    }
                    this.groupArr = arr
                }
            },
        },

 

methods: {
            groupListMe() {
                let _this = this
                //这里是调接口 根据输入关键字 获取匹配的数据
                axios.get(ApiInfo._url + \'/api/company/query-company?keyword=\' + _this.searchtext).then(function(res) {
                    if (res.data.code == 200) {
                        _this.groupList = []
                        _this.groupArr = []
                        _this.groupList = res.data.content.list
                        for (let item of _this.groupList) {
                            _this.groupArr.push({
                                value: item.companyName,
                                id: item.userId
                            })
                        }
                    }
                })
            },
            querySearchGroup(queryString, cb) {
                var groupArr = this.groupArr;
                cb(groupArr);
            },
            selectGroup(val) {
                this.groupId = val.id
            }
        }