效果图如下所示:
首先上代码
<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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。