Vue+ElementUI实现类似百度的模糊查询 (简单实用)

项目中需要用到模糊搜索，用ele-select下拉框达不到效果，然后看了下官方示例
话不多说 直接上代码 可CV

• 这次用的是element中input框中的搜索功能

<div class="Themes">
    <p class="exchange selectTheme">选择:</p>
	<el-autocomplete
	    popper-class="selects"
	    class="headerInput"
	    v-model="value"
	    :fetch-suggestions="querySearch"
	    placeholder="请输入内容"
	    clearable	
	    @focus="focus"
	    @select="handleSelect">
	    
		<template slot-scope="{ item }">
		      <div class="name">{{ item.label }}</div>
	    </template>
	    
    </el-autocomplete>
       <p class="Themes selected">已选择:</p>
      <el-form-item>
        <ul v-for="(item,index) in haveLeaders" :key="index">
	          <li class="selectedLead"><span>{{item.label}}</span> <span>啦啦啦</span> <span class="deleteMs" @click="deleteLead(index)">删除</span></li>
        </ul>
	  </el-form-item>
</div>

• data数据

data () {
	return {
		vaule:"",
		// 数据
		leaderAll:[{
        value: '1',
        label: '第一个1'
      }, {
        value: '2',
        label: '第二个2'
      }],
		//点击选择后存放的数据
		haveLeaders:[]
	}
}

• 在方法里写

 methods: {
    //获取焦点隐藏下拉框
    focus() {
    this.$nextTick (() => {
        var selects = document.querySelector(".selects")
        selects.style.display = "none"
      })
    },
    //模糊搜索
     querySearch(queryString, cb) {
      var restaurants = this.leaderAll;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      //控制下拉框的显示
      this.$nextTick (() => {
        var selects = document.querySelector(".selects")
        queryString == '' ? selects.style.display = "none" : selects.style.display = "block"
      })
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    //过滤已选择的
    handleSelect(items) {
      //  let selects = document.querySelector(".selects")
      // selects.style.display = "block"
      let value = items.value
      this.leaderAll.map( item => {
        if (this.haveLeaders.length !== 0) {
         let havas = this.haveLeaders.filter(x => {
            return x.value === value 
          })
          havas.length === 0 && item.value == value ? this.haveLeaders.push(item) : "" ;
          this.value = ''
        } else {
          item.value == value ? this.haveLeaders.push(item) : "" ;
          this.value = ''
        }
      })
    },
    //删除已选择的
    deleteLead(value) {
      this.haveLeaders.splice(value,1)
    },
  }