一、需求描述
实现一个搜索框：
1、输入关键字，按键抬起后可以实现查询功能；
2、下拉列表展示搜索结果，搜索结果中关键字要用特殊颜色突出显示，默认选中搜索结果的第一项；
3、可以按上下键切换选中项，按回车输出选中项；
4、单击组件之外的地方可以收起下拉列表；
二、分析
用到的插件 pinyin-match：
支持拼音全拼、简拼和汉字模糊匹配。
调用match方法，匹配成功返回数组([匹配到第一个字符的下标，匹配到最后一个字符的下标])，失败返回false。
三、代码实现
<template>
<div class="search-wrapper" @click.stop>
<div class="search-input" :class="{'is-focus':isFocus}">
<!-- 搜索输入框 -->
<input type="text"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
autofocus
v-model="value"
ref='searchInput'
spellcheck="false"
placeholder="搜索..."
@click="changeInput"
@keyup="clickSearch"
@keydown.down.prevent="navigateOptions('next')"
@keydown.up.prevent="navigateOptions('prev')">
<!-- 搜索放大镜图标 -->
<div class="search-icons">
<i class="el-icon-close" v-show="value" @click="clearSearchValue"></i>
<i class="el-icon-search" v-show="!value" @click="clickSearch"></i>
</div>
</div>
<!-- 搜索下拉列表 -->
<div class="search-list">
<div class="search-result" ref="ul">
<ul v-for="item in result">
<li class="select-li" :class="{'is-selected': item.isSelected}" @click="clickResultItem(item)">
<img class="user-avatar" src="../../images/avatar.png">
<div class="user-name">
<span>{{item.keyword[0]}}<span class="keyword">{{item.keyword[1]}}</span>{{item.keyword[2]}}</span>
</div>
</li>
</ul>
<!-- 查询结果为空时候 -->
<div class="result-null" v-if="value && result.length == 0">
没有结果
</div>
</div>
</div>
</div>
</template>
<script>
const PinyinMatch = require('pinyin-match');
export default {
name: 'SearchInput',
data () {
return {
isFocus: false,//搜索框是否获取了焦点
value: '',//输入的搜索关键字
result : [],//全部搜索结果
curIndex: 0,//选中的搜索结果的下标
selectItem: {},//选中的搜索结果
userList: [
{name:'安其拉',id:'a1'},
{name:'安琪',id:'a2'},
{name:'陈仙仙', id:'c1' },
{name:'成小龙', id:'c2' },
{name:'程野', id:'c3' },
{name:'丁小明', id:'d1' },
{name:'丁小龙', id:'d2' },
{name:'丁小野', id:'d3' },
{name:'冯小明', id:'f1' },
{name:'冯小龙', id:'f2' },
{name:'冯小野', id:'f3' },
{name:'高小明', id:'g1' },
{name:'高小龙', id:'g2' },
{name:'高小野', id:'g3' },
{name:'高小阳', id:'g4' },
{name:'郭小名', id:'g5' },
{name:'黄小明', id:'h1' },
{name:'黄小龙', id:'h2' },
{name:'黄小野', id:'h3' },
{name:'郝小阳', id:'h4' },
{name:'郝小名', id:'h5' },
{name:'李小明',id:'l1'},
{name:'李小龙',id:'l2'},
{name:'李小野',id:'l3'},
{name:'李小阳',id:'l4'},
{name:'李小一',id:'l5'},
{name:'李小二',id:'l6'},
{name:'李小三',id:'l7'},
{name:'李小四',id:'l8'},
{name:'李小五',id:'l9'},
]
}
},
mounted () {
let that = this;
document.body.addEventListener('click', () => {//单击组件之外时收起下拉列表
that.isFocus = false;
that.value = "";
}, false);
},
methods: {
changeInput() {//单击搜索框时获取焦点
this.isFocus = true;
},
clearSearchValue () {//清空输入的查询条件
if (this.value) {
this.value = "";//搜索关键字
this.result = [];//全部搜索结果
this.curIndex = 0;//选中的搜索结果的下标
this.selectItem = {};//选中的搜索结果
this.$refs.searchInput.focus();//输入查询条件清空后获取焦点
}
},
clickSearch () {//查询
if (event.code == "ArrowDown" || event.code == "ArrowUp") {//上下键
return;
}
if (event.code == "Enter" && this.selectItem) {
this.clickResultItem(this.selectItem);//有搜索结果时按下enter直接选中第一项
return;
}
this.result = [];//全部搜索结果
this.curIndex = 0;//选中的搜索结果的下标
this.selectItem = {};//选中的搜索结果
if (this.value.trim()) {
for (let i = 0; i < this.userList.length; i++) {//根据所有人员名字匹配
let name = this.userList[i].name;
let search = PinyinMatch.match(name, this.value);
if (search && search.length > 0) {
this.userList[i].keyword = this.getKeyWord(name, search);
this.userList[i].isSelected = false;
this.result.push(this.userList[i]);
}
}
if (this.result && this.result[0]) {
this.result[0].isSelected = true;
this.curIndex = 0;//选中的搜索结果的下标
this.selectItem = this.result[0];//选中的搜索结果
}
} else {
this.$refs.searchInput.focus();//没有输入查询条件焦点不应该失去
}
},
getKeyWord (name, search) {//关键字
let keyword = [];
keyword[0] = name.substring(0, search[0]);
if (search[0] == search[1]) {
keyword[1] = name.charAt(search[0]);//匹配到的作为关键字
keyword[2] = name.substring(search[0] + 1);
} else {
keyword[1] = name.substring(search[0], search[1] + 1);//匹配到的作为关键字
keyword[2] = name.substring(search[1] + 1);
}
return keyword;
},
clickResultItem (data) {//单击下拉列表中的选项
alert('您选择了' + data.name);
},
navigateOptions (direction) { //搜索结果上下键选择
let resultLength = this.result.length;
if (resultLength == 0 || resultLength == 1 ) {
return;
}
let lastIndex = this.curIndex;
if (direction === 'next') {//向下
this.curIndex++;
if (this.curIndex === resultLength) {
this.curIndex = 0;
}
}
if (direction === 'prev') {//向上
this.curIndex--;
if (this.curIndex < 0) {
this.curIndex = resultLength - 1;
}
}
if (lastIndex < resultLength) {
this.result[lastIndex].isSelected = false;
}
if (-1 < this.curIndex < resultLength) {
this.selectItem = this.result[this.curIndex];
this.selectItem.isSelected = true;
// this.result[this.curIndex].isSelected = true;
this.$set(this.result,this.curIndex,this.selectItem)
}
this.resetScrollTop();
},
resetScrollTop () { //设置滚动条的位置
let maxShowCount = this.$refs.ul.clientHeight / 50;
let diff = this.curIndex - maxShowCount;
diff += 4;
this.$refs.ul.scrollTop = diff * (50) + 60;
},
}
}
</script>
<style src="./index.scss" lang="scss"></style>index.scss
.search-wrapper {
background-color: rgb(235, 148, 148);
height: 580px;
width:325px;
overflow: hidden;
border-radius: 3px;
font-family: 'Microsoft YaHei';
box-sizing: border-box;
padding: 10px;
.search-input{
position: relative;
input {
width: 100%;
height: 35px;
box-sizing: border-box;
border: 0;
border-radius: 3px;
margin: 0;
padding: 0px 40px 0px 10px;
outline: 0;
font-size: 14px;
color: #E5EAEE;
// background-color: #209df7;
background-color: #fff;
}
input::-webkit-input-placeholder {
color: #E5EAEE;
}
.search-icons {
position: absolute;
top: 7px;
right: 10px;
color: #209df7;
font-size: 17px;
}
}
.is-focus {
overflow: visible !important;
input {
color: #222 !important;
// border: 1px solid #fff !important;
// background-color: #fff !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 1px 15px hsla(0, 0%, 100%, .3) !important;
}
.search-icons {
.el-icon-close{
color: #111;
background-color: #d8d8d8;
border-radius: 50%;
padding: 2px;
box-sizing: border-box;
font-size: 15px;
cursor: pointer;
}
.el-icon-close:hover{
color: #fff;
background-color: #209df7;
}
}
}
.search-list{
height: 480px;
margin-top: 8px;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 6px rgba(0, 0, 0, .15);
background-color: #fff;
.search-result {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
ul, li{
margin: 0px;
padding: 0px;
}
li{
list-style-type: none;
}
.select-li {
cursor: pointer;
padding: 8px 10px;
overflow: hidden;
border-bottom: 1px solid #ebebeb;
.user-avatar {
border-radius: 50%;
float: left;
width: 40px;
height: 40px;
background-size: cover;
}
.user-name {
width: 200px;
float: left;
margin-left: 15px;
line-height: 40px;
.keyword {
color: #008cee;
}
}
}
.select-li:hover{
background-color: #e5f0fa;
}
.is-selected {
background-color: rgba(140, 197, 255, 0.46)
}
}
.result-null {
margin-top: 100px;
text-align: center;
font-size: 20px;
}
}
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/*滑动轨道*/
::-webkit-scrollbar-track-piece {
background-color: transparent;
-webkit-border-radius: 6px;
}
// 下面是滑块
/*竖向滚动条*/
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgb(161, 161, 161);
-webkit-border-radius: 6px;
}
/*横向滚动条*/
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgb(143, 144, 145);
-webkit-border-radius: 6px;
}三、效果
以上就实现了一个简单的搜索框。
下面对搜索过程进行简单的优化：
在data中添加 timer:null 将搜索过程放入 setTimeout 函数中，按键抬起半秒后再去进行搜索。
clickSearch () {//查询
if (event.code == "ArrowDown" || event.code == "ArrowUp") {//上下键
return;
}
if (event.code == "Enter" && this.selectItem) {
this.clickResultItem(this.selectItem);//有搜索结果时按下enter直接选中第一项
return;
}
this.result = [];//全部搜索结果
this.curIndex = 0;//选中的搜索结果的下标
this.selectItem = {};//选中的搜索结果
if (this.value.trim()) {
clearTimeout(this.timer);
this.timer = setTimeout(function () {
for (let i = 0; i < this.userList.length; i++) {//根据所有人员名字匹配
let name = this.userList[i].name;
let search = PinyinMatch.match(name, this.value);
if (search && search.length > 0) {
this.userList[i].keyword = this.getKeyWord(name, search);
this.userList[i].isSelected = false;
this.result.push(this.userList[i]);
}
}
if (this.result && this.result[0]) {
this.result[0].isSelected = true;
this.curIndex = 0;//选中的搜索结果的下标
this.selectItem = this.result[0];//选中的搜索结果
}
}, 500)
} else {
this.$refs.searchInput.focus();//没有输入查询条件焦点不应该失去
}
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
