网站建设资讯

NEWS

网站建设资讯

基于Vueel-autocomplete实现类似百度搜索框功能

效果图如下所示:

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了北安免费建站欢迎大家使用!

基于Vue el-autocomplete 实现类似百度搜索框功能

首先上代码



注意的细节

基础使用

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 实现类似百度搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


网站栏目:基于Vueel-autocomplete实现类似百度搜索框功能
文章地址:http://cdweb.net/article/jphige.html