前言
typeahead在網站中的應用很多..今天跟著我來寫一個不大靠譜的typeahead;
你能學到什麼?
- 自定義事件
- 遍歷的思想
- 功能細節的考慮
一切都挺不靠譜的...可完善的地方很多.廢話不多說,看效果圖
更新
- 2017-07-21: 完善邏輯及美化樣式,所以效果圖和程式碼都有所變動
效果圖
有哪些功能點?
- 粗糙的模糊搜尋 - 藉助
indexOf ESC和blur事件清除輸入框,沒有找到匹配的情況下Enter預設在找到只剩下一個情況下選中- 方向盤的上下(已經阻止游標的移動)選中子項,回車選中
- 滑鼠點選選擇子項
- 搜尋框清空情況下預設不觸發自定義事件值的返回
- 滑鼠移動+鍵盤方向鍵移動位置的同步
placeholder及遍歷資料data支援外部傳入,也就是繫結props;前者字串,後者陣列物件
程式碼
- typeahead.vue
<template>
<div class="typeahead">
<div class="typeahead-header">
<input type="text" v-model="searchVal" @input="filterList(searchVal)" ref="input" :placeholder="placeholder" @keydown.down.prevent="selectChildWidthArrowDown" @keydown.up.prevent="selectChildWidthArrowUp" @keydown.enter="selectChildWidthEnter" @blur="ifNotFoundClear" @keydown.esc="ifNotFoundClear" autocomplete="off">
</div>
<transition name="el-fade-in-linear" mode="out-in">
<div class="typeahead-content" v-show="searchVal && searchVal.length">
<transition-group tag="ul" name="el-fade-in-linear" v-show="searchList && searchList.length > 0 && isExpand ">
<li v-for="(item,index) in searchList" :key="index" :class="item.active ? 'active':''" @click="selectChild(index)" @mouseenter="setActiveClass(index)" @mouseleave="setActiveClass(index)">
<a href="javascript:;">
{{item.text}}
</a>
</li>
</transition-group>
<p class="noFound" v-show="searchList && searchList.length === 0">未能查詢到,請重新輸入!</p>
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'typeahead',
data: function () {
return {
searchVal: '', // 搜尋關鍵字
resultVal: '', // 儲存搜尋到的值
searchList: [], //儲存過濾的結果集
currentIndex: -1, // 當前預設選中的index,
isExpand: false
}
},
computed: {
typeaheadData () {
return this.mapData;
}
},
props: {
placeholder: {
type: String,
default: '請輸入您要查詢的關鍵字'
},
mapData: {
type: Array,
default: function () {
return [
{
text: 'wofsdf',
value: 0
},
{
text: '我是技術渣1',
value: '1'
},
{
text: '我是技術渣2',
value: '2'
},
{
text: '我是天坑',
value: '2'
},
{
text: '我是天坑,分身乏術',
value: '3'
},
{
text: '我是天坑2,分身乏術',
value: '3'
},
{
text: '我是天坑3,分身乏術',
value: '3'
}
]
}
}
},
methods: {
filterList (searchVal) { // 過濾陣列
if (this.searchVal === '') {
this.ifNotFoundClear();
} else {
this.searchList = []; // 清空列表
let tempArr = []; // 一個臨時陣列
this.currentIndex = -1; // 重置index
this.typeaheadData && this.typeaheadData.forEach(item => {
if (item.text.indexOf(searchVal.trim()) !== -1) {
tempArr.push(item);
}
});
this.searchList = tempArr; // 為什麼要一個臨時陣列,不然每次push都會觸發檢視更新..資料量一大....
this.isExpand = true;
}
},
ifNotFoundClear () { // 若是結果集長度為0就證明沒有找到...賦值為空
if (this.searchList.length === 0) {
this.searchVal = '';
this.isExpand = false;
}
this.searchList.forEach(item => {
item.active = false;
})
},
selectChild (index) {
// 滑鼠點選選擇子項
this.searchList.forEach((item, innerIndex) => {
if (index === innerIndex || item.active) {
this.searchVal = item.text;
this.resultVal = item.value;
this.isExpand = false;
}
this.$set(item, 'active', false);
})
this.$emit('selectValue', { text: this.searchVal, value: this.resultVal });
},
selectChildWidthArrowDown () {
// 判斷index選中子項
if (this.currentIndex < this.searchList.length) {
this.currentIndex++;
this.searchList.forEach((item, index) => {
this.currentIndex === index ? this.$set(item, 'active', true) : this.$set(item, 'active', false);
})
}
},
selectChildWidthArrowUp () {
// 判斷index選中子項
if (this.currentIndex > 0) {
this.currentIndex--;
this.searchList.forEach((item, index) => {
this.currentIndex === index ? this.$set(item, 'active', true) : this.$set(item, 'active', false);
})
}
},
selectChildWidthEnter () {
// 若是結果集只有一個,則預設選中
if (this.searchList.length === 1) {
this.searchVal = this.searchList[0].text;
this.resultVal = this.searchList[0].value;
this.isExpand = false;
this.$emit('selectValue', { text: this.searchVal, value: this.resultVal })
} else {
// 若是搜尋的內容完全匹配到項內的內容,則預設選中
this.searchList.forEach(item => {
if (this.searchVal === item.text || item.active === true) {
this.searchVal = item.text;
this.resultVal = item.value;
this.isExpand = false;
this.$emit('selectValue', { text: this.searchVal, value: this.resultVal })
}
})
}
},
setActiveClass (index) {
this.searchList.forEach((item, innerIndex) => {
if (index === innerIndex) {
this.$set(item, 'active', true);
this.currentIndex = index; // 這句話是用來修正index,,就是鍵盤上下鍵的索引,不然會跳位
} else {
this.$set(item, 'active', false)
}
})
}
}
}
</script>
<style scoped lang="scss">
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active,
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
transition: opacity .2s linear;
}
.el-fade-in-enter,
.el-fade-in-leave-active,
.el-fade-in-linear-enter,
.el-fade-in-linear-leave,
.el-fade-in-linear-leave-active,
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
opacity: 0;
}
.typeahead {
position: relative;
background-color: #fff;
a {
color: #333;
text-decoration: none;
padding: 5px;
}
ul {
list-style: none;
padding: 6px 0;
margin: 0;
overflow: visible;
li {
display: block;
width: 100%;
padding: 5px;
font-size: 14px;
padding: 8px 10px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #48576a;
height: 36px;
line-height: 1.5;
box-sizing: border-box;
cursor: pointer;
&.active {
background-color: #20a0ff;
a {
color: #fff;
}
}
}
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #bfcbd9;
box-sizing: border-box;
color: #1f2d3d;
font-size: inherit;
height: 36px;
line-height: 1;
outline: 0;
padding: 3px 10px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
display: inline-block;
}
.typeahead-header,
.typeahead-content {
width: 100%;
}
.typeahead-content {
position: absolute;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
box-sizing: border-box;
margin: 5px 0;
}
.noFound {
text-align: center;
}
}
</style>複製程式碼總結
自此,一個挺粗糙的模糊搜尋元件就完成了;
希望此文對於正在閱讀的您有所收穫~~
有更好的方案或者實現方法的可以留言...謝謝
