开发中免不得会用到搜索功能，移动端是类似于图一的这种形式，WEB端是类似图二的这种形式，但思路都是大同小异的。

今天就来聊聊图二这种形式(Vue版带历史记录的即时搜索输入框)的实现思路，也作为日常总结之需。

图一.jpg

图二.png

思路：

1.先创建1个input框，一个filter列表，一个history列表(模板)；

//注入模拟数据

data() {

return {

filterText: '',

list: [{

name: '小花',

status: '优秀'

}, {

name: '小明',

status: '良好'

}, {

name: '小陈',

status: '较差'

}],

showHistory: true,

historyList: []

}

},

2.再用computed的filterList()对原始list做过滤计算，再返回这个filterList列表；

computed: {

/**

* 数据过滤函数

*/

filterList() {

let arr = []

console.log(this.filterText)

//不存在需查询关键字，则直接返回新数组

this.list.forEach((item) => arr.push(item))

//存在需查询关键字，则返回过滤后的新数组

if (this.filterText) {

//关键语句

arr = this.list.filter(item => item.name.includes(this.filterText) || item.status.includes(this.filterText))

}

console.log(arr)

return arr

},

3.使用watch实时监听filterText值，做去重unique()和缓存localStorage.setItem()操作，并返回这个历史记录。

watch: {

/**

* filterText监听函数

*/

filterText(newval, oldval) {

if (newval !== '') {

//新值不为空，则收起历史记录板

this.showHistory = false

if (newval.length > oldval.length) {

//用户增加输入值长度时才插值到历史记录

this.historyList.push(newval)

//插值后进行去重

this.historyList = this.unique(this.historyList)

let parsed = JSON.stringify(this.historyList);

console.log(parsed, newval.length, oldval.length)

//将JSON对象转换成为JSON字符串输入

localStorage.setItem('historyList', parsed);

} else {

return false

}

} else {

//新值为空，则展开历史记录板

this.showHistory = true

}

}

}

4.最后记得在mounted()时就要获取之前的历史记录

mounted() {

if (localStorage.getItem('historyList')) {

//将JSON字符串转换成为JSON对象输出

this.historyList = JSON.parse(localStorage.historyList)

console.log(this.historyList)

}

},

效果如图.png