基于Vue el-autocomplete 实现类似百度搜索框功能
(编辑：jimmy 日期: 2024/11/9 浏览：3 次 )
效果图如下所示：
首先上代码
<template>
<div class="assets-search height-all">
<div class="search-layout">
<div class="search-title">让数据触手可及</div>
<div class="search-input-layout">
<!--<el-input class="search-input" placeholder="检索数据"
@keyup.enter.native="searchAssets($event)"
v-model="searchContent">
<el-button style="color: white"
@click="searchAssets(searchContent)"
slot="append">搜 索</el-button>
</el-input>-->
<el-autocomplete
class="inline-input search-input"
v-model="searchContent"
ref="autocomplete"
:fetch-suggestions="requestDoSuggest"
placeholder="请输入您需要检索资源名称或者中文"
@keyup.enter.native="searchAssets($event)"
:trigger-on-focus="false"
@select="handleSelect"
>
<el-button @click="searchAssets" slot="append">搜 索</el-button>
</el-autocomplete>
<div class="search-word-layout" v-show="searchWordList.length">
<span class="search-word-title">热门搜索：</span>
<div class="search-word-list">
<span class="search-word"
v-for="(item, index) in searchWordList"
@click="clickHotWord(item)"
:key="index">{{item}}</span>
</div>
</div>
</div>
<el-button v-if="false" class="db-number-layout">{{`资产库：${ddNumber}`}}</el-button>
</div>
</div>
</template>
<script>
import {mapActions } from 'vuex';
export default {
name: "search",
created() {
this.requestHotWord();
},
data() {
return {
searchContent:'',
ddNumber:3445,
searchWordList:[],
hotWordSize:5,
}
},
methods:{
...mapActions(['_AJAX']),
/**
* 点击热词搜索
*/
clickHotWord(item) {
this.searchContent = item;
this.searchAssets();
},
/**
* 跳转到搜索结果页面
*/
searchAssets(event) {
if (event) {
event.target.blur();
this.$refs.autocomplete.close();
}
let viewRoute = this.$router.resolve({
path: '/assets/searchResult',
query: {
searchContent: this.searchContent,
}
});
window.open(viewRoute.href, '_blank');
},
/**
* 自动补全
*/
requestDoSuggest(queryString, cb) {
let params = {
url: 'esSearch.doSuggest',
data: {
input: queryString,
size:4,
},
method: 'GET'
};
this._AJAX(params)
.then(res => {
let list = res.result.map((item)=>{
return {value:item}
})
cb(list);
})
},
/**
* 选择联想出来的数据
*/
handleSelect(item) {
this.searchContent = item.value;
this.searchAssets();
},
/**
* 请求热词列表
*/
requestHotWord() {
let params = {
url: 'esSearch.queryHotWord',
data: {
size:this.hotWordSize,
},
method: 'GET'
};
this._AJAX(params)
.then(res => {
this.searchWordList = res.result;
})
}
},
}
</script>
<style lang="scss">
.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;
}
}
</style>
注意的细节
基础使用
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 实现类似百度搜索框功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
下一篇：vue实现评论列表功能