elementUi简单实现搜索提示功能

时间：2023-03-31 21:30:35 vue.js

上周，需求再次增加。好吧，带上它。先说需求目标。实现功能聚焦，需要显示历史搜索（保存缓存）。当历史搜索下方出现清除缓存按钮时，需要根据后台返回输出。el-autocomplete组件在teleprompterelementui中比较好用，但是给组件添加清除按钮比较麻烦。因为el-autocomplete的slot是写入弹框的每一项，而不是整个弹框，所以这里我把清除缓存的按钮作为一个选项推入到提示数组中，然后写入Items进行样式处理；其次，根据input匹配提示，它会使用watchdetection代替input或changeevent先到html部分{{item.value}}

值得注意的是el-autocomplete组件必须设置ref，因为我们不会设置change事件，所以需要手动关闭弹框，然后js部分querySearch(queryString,cb){letresults=null//调用回调返回建议列表的数据{if(this.OldSearch.length){results=this.OldSearch.map((item,index)=>{return{value:item,index:index+1}})results.push({value:'Clearhistorysearch',index:this.OldSearch.length+1})}else{results=[]}}else{results=this.complete_word}cb(results)},this需要判断是否输入了一个词。如果没有单词，会显示缓存的单词，如果有单词提示，按下单词选择，触发关闭弹窗事件GoSearch(word){if(word!=='清除历史搜索'){this.search_word=wordthis.$nextTick(()=>{this.$refs.input1.c失去（）这个.$refs.input1.$children[0].blur()this.$refs.input2.close()this.$refs.input2.$children[0].blur()}}else{this.delSearchStorage()this.$nextTick(()=>{this.$refs.input1.close()this.$refs.input1.$children[0].blur()this.$refs.input2.close()this.$refs.input2.$children[0].blur()})}}，希望大家点赞、评论、关注成品！

上一篇：antdvue使用标签组件时，调用close会关闭2个标签（已解决）

下一篇：js实现中文排序（localeCompare用法）

elementUi简单实现搜索提示功能相关文章