VUE 使用 element-ui 的 el-autocomplete 组件实现输入框提示功能

昨天是我第一次接触vue，就分配了一个把下拉框改成带提示功能的输入框的任务，这样提高用户体验，不用从好多选项选出所要的值。我踩了很多雷最后才是实现出来，希望对大家有用。

1.el-autocomplete是elementUI的一个组件，所以先把element-ui引进vue项目中：

npm i element-ui -S

2.配置一下element-ui，在VUE的main.js文件下添加如下代码:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3.之后就可以使用elementUI,在你要改动的.vue文件下：

<template>
//提示功能的输入框
                <el-autocomplete
                  class="el-input"
                  v-model="event.programCode"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  :trigger-on-focus="false"
                  @select="handleSelect">
                </el-autocomplete>
	
</template>

4.变现js代码实现上面代码的各个功能

export default {
  name: "",
  components: {
   
  },
  methods: { 
  //所有的方法都要写在methods里面
  querySearchAsync(queryString, cb) {
  //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示，所以我从新封装了
     let programs = this.programs;
   
     let programList = [];
    for(let i=0;i<this.programs.length;i++){
      programList.push({'value':programs[i].code +' '+'-'+' '+programs[i].name})
      }
      
      let results = queryString ? programList.filter(this.createStateFilter(queryString)) : programList;
	//基本思路就是实现一个过滤器，过滤存在你输入字段的所有数据。
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },createStateFilter(queryString) {
      return (program) => {
        return (program.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };
    },handleSelect(item) {
      this.event.programCode = item.value
    },
    //hangdleSelect你选中那行，item就就是那那条数据，直接赋值v-modal就实现回显了。

5.programs是在data中定义的，用·ajax或者其他获取到的，一般都是把下拉框改成输入框所以数据都存在，我就不做太多赘述了：

data () {
    var vueObj = this;
    return {
      programs: {},

这样就可以简单地实现输入自动提示的功能了。有问题可以加我评论区给我留言，我尽力解决。