VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单！！！

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: {},

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