vue实现搜索框记录搜索历史_Vue.js实现简易的搜索功能

这个搜索功能的实现很简单，无论是方法还是逻辑(思路在文章末尾)，使用的仅仅只有filter和match这两个方法，那现在就上两个简易的demo吧！

Demo1：输入框内容改变自动搜索

HTML代码

• {{item}}

VUE代码

new Vue({

el: "#app",

data: {

searchText: "",

list: [

"上路巩州遇虎熊",

"五百年前一场疯",

"腾宵又是孙悟空",

"失马鹰愁涧飞白龙",

"沙河阻断路难通",

"福陵山中收天蓬",

"岭上前行逆黄风",

"七星不照波月洞",

"千年白骨化阴风",

"鱼篮网通天一尾红",

"紫金葫芦二道童",

"九尾老狐敢压龙",

"白虹坠雪浪击石碎",

"思归",

"难归",

"堕回",

"轮回",

"月满一江水",

"前世莫追",

"福泽聚宝象",

"春风度不让洛阳",

"玉面狐折兰香",

"七绝崖上暗伏赤色大蟒",

"过西梁女儿国",

"鸳鸯罗帐",

"与三道斗法相火云扬",

"明枪易挡暗箭难防"

]

},

computed: {

searchList: function(){

return this.list.filter((text) => {

return text.match(this.searchText);

})

}

}

})

Demo2：点击确定手动搜索输入框里的内容

HTML代码

Search

• {{item}}

VUE代码

new Vue({

el: "#app",

data: {

searchText: "",

list: [

"上路巩州遇虎熊",

"五百年前一场疯",

"腾宵又是孙悟空",

"失马鹰愁涧飞白龙",

"沙河阻断路难通",

"福陵山中收天蓬",

"岭上前行逆黄风",

"七星不照波月洞",

"千年白骨化阴风",

"鱼篮网通天一尾红",

"紫金葫芦二道童",

"九尾老狐敢压龙",

"白虹坠雪浪击石碎",

"思归",

"难归",

"堕回",

"轮回",

"月满一江水",

"前世莫追",

"福泽聚宝象",

"春风度不让洛阳",

"玉面狐折兰香",

"七绝崖上暗伏赤色大蟒",

"过西梁女儿国",

"鸳鸯罗帐",

"与三道斗法相火云扬",

"明枪易挡暗箭难防"

],

searchList: []

},

methods: {

search(){

this.searchList = this.list.filter((text) => {

return text.match(this.searchText);

})

}

},

created() {

this.searchList = this.list;

}

})

其实讲到头，精髓只有两句话

先来看看filter方法是干什么的？

// 现在我手中有一个数组，代表的都是人的年龄，我想把那些大于等于18的人都给揪出来打一顿(真动起手来这谁顶得住啊)！！！

var arr = [32, 33, 16, 40];

/*

对这个数组使用filter方法。filter中的回调函数有个参数num，可以当做是每次从数组中遍历出来的一个值，而return后带的可以是一个表达式，总之就是把符合这个表达式的所有值返回出来。

运行逻辑：

arr数组有4个值，所以filter会执行4次，

第一次：回调函数中的参数num是32，结果是true(符合大于等于18)，所以现在返回的是[32]

第二次：回调函数中的参数num是33，结果是true(符合大于等于18)，所以现在返回的是[32, 33]

第三次：回调函数中的参数num是16，结果是false(并不符合大于等于18)，所以现在返回的还是[32, 33]

第四次：回调函数中的参数num是40，结果是true(符合大于等于18)，所以最终函数执行的结果是[32, 33, 40]

*/

var daan = arr.filter(function(num){

return num >= 18;

});

// 最后得出的结果是：[32, 33, 40]

console.log(daan);

再来看看match方法又是干什么的？

// 我这有一个字符串，可以使用match方法检索字符串里有没有某个内容

var hello = "你好，世界";

// 如果字符串中你需要检索的内容，就返回这个内容，同时你还可以知道这个内容所在的位置(索引0，第一个)

// 结果是：["你", index: 0, input: "你好，世界"]

console.log(hello.match("你"));

// 当然，这个字符串里没有"我"，所以就会返回null

// 结果是：null

console.log(hello.match("我"));

所以，filter和match方法混用实现搜索的思路就是这么简简单单的一句话：

this.list.filter((text) => {

return text.match(this.searchText);

})

// 实现搜索的思路：

// 对list这个数组使用filter方法，把符合条件(也就是结果为true)的值都取出来

// 而这里的条件就是：对数组(list)里面每个遍历的值(text)使用match方法，如果用户搜索的内容(this.search)存在于这个值里

// 这里要注意，match方法返回的结果要不就是有值(任何非空的文本型数据转换成布尔类型都为true)，要不就是null(空值转换成布尔类型为false)

// 所以到最后，返回的就是list数组中所有符合搜索关键词的内容。

最后给你们补补关于强制转换Boolean的课：

当各种内容强制转换成布尔值…

会转换成”false”的内容如下：

“”，0，-0，NaN，null，undefined，false

任何不在”false”列表中的都是”true”，例如：

“hello”，18，true，数组array[]，对象object{}，函数function()