溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
效果圖如下所示：
首先上代碼
<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
@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 實現類似百度搜索框功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
