element带输入建议el-autocomplete的使用
vue+element UI
element UI的带输入建议官方文档：https://element.eleme.cn/#/zh-CN/component/input
建议先看官方文档，这里是官方文档的适当补充
引用el-autocomplete
1、在需要的地方引用
<el-autocomplete class="inline-input" v-model="inputValue" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSubmit" ></el-autocomplete>
v-model="inputValue" ：与inputValue绑定值，也就是说，自动输入建议的值可以通过inputValue拿到。
:fetch-suggestions="querySearch" ： 返回输入建议的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据，这些数据就是输入建议的数据。
@select="handleSelect" ： 当选中建议项时，调用该方法。
2 、
<script>
export default {
name: "searchBar",
//allInfos是父组件传来的值，如果allInfos不是父组件传来的就不用这样写
props: ["allInfos"],
data() {
return {
inputValue: "",
};
},
methods: {
handleSubmit() {
//根据自身情况
//该方法是提交时触发
},
//输入框获取焦点时调用的方法
querySearch(queryString, cb) {
//allInfos是怎么来，是从父组件传过来的还是在自己组件调用api接口拿到的还是其他
//我这里的allInfos是从父组件传过来的，在这里也举例子组件从父组件传值
let results = this.allInfos;
results = queryString
? results.filter(this.createFilter(queryString))
: results;
//cb是回调函数，返回筛选出的结果数据到输入框下面的输入列表
cb(results);
},
//该方法仿写官方文档，如果没有特别的需求，该方法改动不大
//这是当输入数据时触发的，筛选出和输入数据匹配的建议输入。
//我这里用的是调用match方法，是模糊匹配；官方调用的是indexOf，是精确匹配，看自身情况选择
createFilter(queryString) {
return (item) => {
return item.value.toUpperCase().match(queryString.toUpperCase());
};
},
},
};
</script>
触发带输入建议的两种方式
1.输入框获取焦点时就触发
这是默认的
2.输入值后匹配触发
在组件上加上:trigger-on-focus="false"
<el-autocomplete class="inline-input" v-model="inputValue" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入内容" @select="handleSubmit" ></el-autocomplete>
转成输入建议回调的数据结构
大家也看到了文档里面，回调的数据结果，是一个数组，数组的每一项是一个对象，对象里一定要有一个value的属性，这些是必须的。如果数据结构不长这样，那么待输入建议的数据是无法渲染出来的。
[
{ "value": "xxx(在输入建议看到的值，必需)", "address": "看自身情况" },
]
那么问题来了，如果拿出来的数据不是这样结构，该怎么办？以我的情况举个例子。
我拿到的数据是这样的，虽然也是数组，但是数组里的对象属性不一样。
this.modelInfos=
[
{ "modelId": "1", "modelName": "a1"，type:"c" },
{ "modelId": "2", "modelName": "a2"，type:"c" },
{ "modelId": "3", "modelName": "a3"，type:"c" },
{ "modelId": "4", "modelName": "a4"，type:"c" },
]
用map返回想要的数据结构。
this.allInfos= this.modelInfos.map((terminal) => {
return {
value: modelName,
name: modelId,
};
});
可以log打印一下，就会发现allInfos的结构就变成了想要的亚子。
增加回车触发事件
在组件里增加 @keyup.enter.native方法
<el-autocomplete class="inline-input" v-model="inputValue" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入内容" @select="handleSubmit" @keyup.enter.native="handleSubmit" ></el-autocomplete>
解决回车后建议输入框没消失的bug
如果增加了回车事件，那么输入数据回车后，输入建议框没有自动消失，该如何解决？
在组件又增加方法：@input（在输入值发生改变的时候触发changeStyle方法）
@keyup（按键松开触发的事件，也就是回车时触发changeStyle方法）
传入的“block”是让输入框建议展开，'.el-autocomplete-suggestion'是输入建议框的类名
<el-autocomplete
class="inline-input"
v-model="inputValue"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
placeholder="请输入内容"
@select="handleSubmit"
@keyup.enter.native="handleSubmit"
@input="changeStyle('block', '.el-autocomplete-suggestion')"
@keyup="changeStyle('block', '.el-autocomplete-suggestion')"
></el-autocomplete>
//根据传进来的状态改变建议输入框的状态（展开|隐藏）
changeStyle(status, className) {
let dom = document.querySelectorAll(className);
dom[0].style.display = status;
},
在handleSubmit的时候调用changeStyle方法，传入的状态为none（表示让输入建议框隐藏）
handleSubmit() {
this.changeStyle("none", ".el-autocomplete-suggestion");
},
栏 目：vue
下一篇：没有了
本文标题：element带输入建议el-autocomplete的使用
本文地址：http://www.codeinn.net/misctech/205734.html
