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

效果图如下所示:

首先上代码

<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 el-autocomplete 实现类似百度搜索框功能 的全部内容, 来源链接: utcz.com/z/339292.html

回到顶部