el-autocomplete属性,el-input autocomplete
主要介绍带有输入建议的element El-autocomplete的使用方法，通过示例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
目录
用输入建议引用el-autocomplete触发器的两种方式转换为输入建议回调的数据结构，增加回车触发事件解决回车后输入建议框不消失的bugvue元素UI。
带有输入建议的元素UI官方文档：https://element.eleme.cn/#/zh-CN/component/input
建议先看公文。这是对官方文件的适当补充。
引用el-autocomplete
1.需要时引用。
El-自动完成
class=内联输入
v-model=输入值
:fetch-suggestions=querySearch
Placeholder=请输入内容
@select=handleSubmit
/El-自动完成
V-model=inputValue :绑定到inputValue的值，也就是自动输入建议的值，可以通过inputValue得到。
:fetch-suggestions=querySearch :返回输入建议的方法，也就是说，输入框一获得焦点。这个方法会被自动调用来获取数据，也就是输入的建议数据。
@select=handleSelect :选择建议的项目时调用此方法。
2 、
脚本
导出默认值{
名称：搜索栏，
//allInfos是父组件传递的值。如果allInfos不是父组件传递的，就不用这么写了。
道具：[allInfos]，
data() {
返回{
输入值： ，
};
},
方法：{
handleSubmit() {
//根据自己的情况
//提交时触发此方法。
},
//当输入框获得焦点时调用的方法
querySearch(queryString，cb) {
//allInfos是怎么来的，是从父组件传过来的，还是自己的组件调用api接口时得到的，还是别的什么？
//我这里的allInfos是从父组件传递过来的，这里有一个子组件从父组件传递值的例子。
let results=this.allInfos
results=queryString
？results . filter(this . create filter(query string))
:结果；
//cb是回调函数，将过滤后的结果数据返回到输入框下面的输入列表中。
cb(成绩)；
},
//这个方法模仿了公文。如果没有特殊要求，这种方法不会有太大变化。
//输入数据时触发，过滤出与输入数据匹配的建议输入。
//我这里调用的是match方法，是模糊匹配；官方调用的是indexOf，完全匹配。根据自己的情况选择。
createFilter(queryString) {
退货(项目)={
返回item.value.toUpperCase()。match(query string . toupper case())；
};
},
},
};
/脚本
触发带输入建议的两种方式
1.输入框在获得焦点时被触发。
这是默认值。
2.输入值后匹配触发器。
向组件添加：trigger-on-focus=false
El-自动完成
class=内联输入
v-model=输入值
:fetch-suggestions=querySearch
:trigger-on-focus=false
Placeholder=请输入内容
@select=handleSubmit
/El-自动完成
转成输入建议回调的数据结构
可以看到，在文档中，回调的数据结果是一个数组，数组的每一项都是一个对象。对象中必须有value属性，这是必须的。如果数据结构不像这样长，则不能呈现要输入用于建议的数据。
[
{ 值: xxx(输入建议值时必选)，地址:看自己情况 }，
]
那么问题来了，取出来的数据不是这样结构化的怎么办？以我的情况为例。
我得到的数据是这样的。虽然也是数组，但是数组中对象的属性不同。
this.modelInfos=
[
{ modelId: 1 ， modelName: a1 ，类型： c }，
{ modelId: 2 ， modelName: a2 ，类型： c }，
{ modelId: 3 ， modelName: a3 ，类型： c }，
{ modelId: 4 ， modelName: a4 ，类型： c }，
]
使用map返回所需的数据结构。
this . allin fos=this . model infos . map((终端)={
返回{
值：型号名称，
名称：modelId，
};
});
你可以打印日志，你会发现allInfos的结构变成了想要的子。
增加回车触发事件
在组件里增加@keyup.enter.native方法
埃尔-自动完成
class=内联输入
v-model=输入值
:fetch-suggestions=querySearch
:trigger-on-focus=false
占位符=请输入内容
@select=handleSubmit
@ keyup。进入。native= handle submit
/El-自动完成
解决回车后建议输入框没消失的bug
如果增加了回车事件，那么输入数据回车后，输入建议框没有自动消失，该如何解决？
在组件又增加方法：@input(在输入值发生改变的时候触发改变风格方法)
@keyup(按键松开触发的事件，也就是回车时触发改变风格方法)
传入的"阻止"是让输入框建议展开，.埃尔-自动完成-建议是输入建议框的类名
埃尔-自动完成
class=内联输入
v-model=输入值
:fetch-suggestions=querySearch
:trigger-on-focus=false
占位符=请输入内容
@select=handleSubmit
@ keyup。进入。native= handle submit
@input=changeStyle(block ，).el-autocomplete-suggestion )
@keyup=changeStyle(block ，).el-autocomplete-suggestion )
/El-自动完成
//根据传进来的状态改变建议输入框的状态（展开隐藏)
改变风格(状态，类名){
设DOM=文档。查询selectorall(类名)；
DOM[0]。风格。显示=状态；
},
在处理提交的时候调用改变风格方法，传入的状态为无（表示让输入建议框隐藏)
handleSubmit() {
this.changeStyle(none ，).El-autocomplete-suggestion’)；
},
到此这篇关于元素带输入建议埃尔-自动完成的使用的文章就介绍到这了，更多相关元素埃尔-自动完成内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。