[vue]vue+element下拉菜单进行搜索查询

最近公司的项目中需要使用类似于百度搜索的某个功能，即在输入框输入内容后能够将模糊查询的内容在输入框下显示出来。

图片：TIM截图20190417093420.png

在vue中如何引入element-ui这里就不多做说明了，直接上代码
在vue中的最大的template中使用组件：

<div style="display:inline-block" class="schoolSearch">
      <span>学校:</span>
      <el-autocomplete
        class="inline-input"
        v-model="state2"
        value-key="schoolName"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @select="handleSelect"
      ></el-autocomplete>
    </div>

说明一下，这里的value-key="schoolName"，默认情况下该组件只能识别value字段，有两种操作，一种是把你获取的字段更改为value，或者使用value-key将其更改为你想要的字段（推荐第二种）。

data() {
  return {
    value4: "",
    value3: "",
    schoolName: '',
    shchoolList:[],
    newShchoolList:[],
    state1: "",
    state2: "",
    currentPage:1,
    pageSize:2,   
    totalNum:0,
    cityData:{},
    tableData: [],
    multipleSelection: [],
    pageCount:0
  };
},

下面重点是methods中的内容：

querySearch(queryString, cb) {
  let list = [{}]
   this.$axios.post(base_url+'/searchSchoolByName?schoolName='+queryString).then(
    res=>{
      console.log(res);
      if(res.data.code ==200){
          list = res.data.datas.schools;
          cb(list);
      }
    }
  ).catch(
    err=>{
      console.log('获取失败：',err);
    }
  )
},

说明一下上边的函数中的两个参数，queryString是在输入框中输入的内容。cb是回调函数。


然后就可以了。