本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
效果图如下所示：
首先上代码
<div class="assets-search height-all"> <div class="search-layout"> <div class="search-title">让数据触手可及</div><div class="search-input-layout"> <!-- 搜 索 --> 搜 索<div class="search-word-layout"> <span class="search-word-title">热门搜索：</span><div class="search-word-list"> <span class="search-word">{{item}}</span></div></div></div>{{`资产库：${ddNumber}`}}</div></div> .assets-search { display: flex; flex-direction: column; justify-content: center; background: #6ba9ec; .search-layout{ text-align: center; .search-title{ font-size: 50px; color: white; font-weight: bold; padding-bottom: 40px; } .search-input-layout{ display: flex; flex-direction: column; justify-content: center; align-items: center; .search-input{ width: 50%; } .search-word-layout{ text-align: left; width: 50%; padding: 15px; display: flex; flex-direction: row; align-items: center; .search-word-title{ font-size: 15px; color: white; } .search-word-list{ span:hover{ color: #666666; } } .search-word{ font-size: 15px; color: white; padding-right: 10px; cursor: pointer; } } } .db-number-layout{ margin-top: 80px; } } .el-input-group--append .el-input__inner { border-radius: 0; height: 48px; line-height: 4<b>本文来源gao@dai!ma.com搞$代^码!网7</b>8px; } .el-input-group__append { background: $color-assist; border-color: $color-assist; border-radius: 0; color: white; } }
注意的细节
基础使用
fetch-suggestions 这个方法是去请求包含关键字的搜索功能，这里注意返回结果里面的列表对象属性里面要有一个value的属性，这个才能显示，联想输入内容。
select 方法是选择了一个联想输入的具体数据的点击事件
注意事项
按enter键进行搜索功能@keyup.enter.native="searchAssets(event)"，有些人会好奇，这个 event)”，有些人会好奇，这个event)”，有些人会好奇，这个event是一个什么东西，其实就是一个事件，代码
if (event) { event.target.blur(); this.$refs.autocomplete.close(); }
这个是为了处理点击enter使input输入框失去焦点，还有一个作用就是，让el-autocomplete 的联想输入框关闭。这个达到和百度搜索类似的效果。
总结
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是基于Vue el-autocomplete 实现类似百度搜索框功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：基于Vue el-autocomplete 实现类似百度搜索框功能
转载请注明原文链接：基于Vue el-autocomplete 实现类似百度搜索框功能
