这个搜索功能的实现很简单,无论是方法还是逻辑(思路在文章末尾),使用的仅仅只有filter和match这两个方法,那现在就上两个简易的demo吧!
Demo1:输入框内容改变自动搜索
HTML代码
<div id="app"> <input type="text" placeholder="请输入您需要查询的内容" v-model="searchText"> <ul> <li v-for="item in searchList">{{item}}</li> </ul> </div>
VUE代码
new Vue({ el: "#app", data: { searchText: "", list: [ "上路巩州遇虎熊", "五百年前一场疯", "腾宵又是孙悟空", "失马鹰愁涧飞白龙", "沙河阻断路难通", "福陵山中收天蓬", "岭上前行逆黄风", "七星不照波月洞", "千年白骨化阴风", "鱼篮网通天一尾红", "紫金葫芦二道童", "九尾老狐敢压龙", "白虹坠雪浪击石碎", "思归", "难归", "堕回", "轮回", "月满一江水", "前世莫追", "福泽聚宝象", "春风度不让洛阳", "玉面狐折兰香", "七绝崖上暗伏赤色大蟒", "过西梁女儿国", "鸳鸯罗帐", "与三道斗法相火云扬", "明枪易挡暗箭难防" ] }, computed: { searchList: function(){ return this.list.filter((text) => { return text.match(this.searchText); }) } } })
Demo2:点击确定手动搜索输入框里的内容
<div id="app"> <input type="text" placeholder="请输入您需要查询的内容" v-model="searchText" @keyup.enter="search"> <button @click="search">Search</button> <ul> <li v-for="item in searchList">{{item}}</li> </ul> </div>
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()