elementui组件elautocomplete联想搜索

autocomplete 是一个可带输入建议的输入框组件&＃xff0c;fetch-suggestions 是一个返回输入建议的方法属性&＃xff0c;如 querySearch(queryString, cb)&＃xff0c;在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

使用之前建议参考官方文档
input根据输入内容提供对应的输入建议https://element.eleme.cn/#/zh-CN/component/input

//官网使用列子
>



• 问题&＃xff1a;获取到后端返回的数组&＃xff0c;并将数组传入作为 results 传入 callback 后&＃xff0c;焦点放在 输入框 上的时候&＃xff0c;并未出现任何内容&＃xff0c;只出现了一个不完整的空白框。
• 原因&＃xff1a;默认绑定data:[] 中的 value 字段。
• 解决办法&＃xff1a;&＃xff08;看了好多方法&＃xff0c;其实这里不需要很麻烦的转换数据结构&＃xff09;官网提供了属性value-key&＃xff0c;赋值成你需要的字段即可。
  

//我这里需要的字段名称为companyName


增加回车触发事件

• 问题&＃xff1a;&＃64;keydown.enter事件触发不了
• 原因&＃xff1a;element-ui自身封装了一层input标签之后&＃xff0c;把原来的事件隐藏了&＃xff0c;加上.native可以监听到组件根元素的原生事件
• 解决方法&＃xff1a;使用&＃64;keydown.native.enter

一开始触发条件使用了blur,改成change就好了&＃xff0c;具体原因正在考察中。

searchRule: {searchCompany: [{required: true, message: &＃39;企业不能为空&＃39;, trigger: &＃39;change&＃39;}],},

表单只有一个input&＃xff0c;回车事件时需要禁止默认提交表单

• 问题&＃xff1a;表单只有一个input&＃xff0c;回车默认提交表单。导致第一次回车就会刷新页面&＃xff0c;再次回车&＃xff0c;才出发回车事件。
• 解决&＃xff1a;当一个 form 元素中只有一个输入框时&＃xff0c;在该输入框中按下回车会提交该表单。如果希望阻止这一默认行为&＃xff0c;可以在标签上添加 &＃64;submit.native.prevent。或者为表单元素增加属性 onSubmit&＃61;"return false"。

其他问题遇到继续补充。