微客导航 » 文章资讯 » 基于Vue el-autocomplete 实现类似百度搜索框功能

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

2023-08-10 09:34:05 187

效果图如下所示：

首先上代码




.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:48px;
}
.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的联想输入框关闭。这个达到和百度搜索类似的效果。

总结

以上所述是小编给大家介绍的基于Vueel-autocomplete实现类似百度搜索框功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐