• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

Vue.js实现简易的搜索功能

代码笔记 barben 5年前 (2019-03-30) 32460次浏览 7个评论

这个搜索功能的实现很简单,无论是方法还是逻辑(思路在文章末尾),使用的仅仅只有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:点击确定手动搜索输入框里的内容

HTML代码

<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()


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
Vue.js实现简易的搜索功能 - https://www.barben.cn/code/345.html
喜欢 (28)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
成功捕捉到了 7 只稀有精灵
  1. text.match is not a function
    心跳的符号2021-03-29 10:03 回复
  2. lingfeng
    >alert('lingfeng')<
    lingfeng2020-09-08 11:14 回复
  3. text.match is not a function 求解
    ss2020-08-24 14:47 回复
    • barben
      你有没有在filter方法里箭头函数的参数声明这个text?
      barben2020-09-08 10:04 回复
  4. 不对。大佬
    ss2020-08-24 14:46 回复
  5. 请问我使用您的范例发生了报错: ERROR Failed to compile with 1 errors 3:17:11 PM error in ./src/App.vue Syntax Error: new is a reserved word (14:2) 12 | export default { 13 | name: 'App', > 14 | new Vue({ | ^ 15 | el: "#app", 16 | data: { 17 | search: "", 请问是什么原因?
    夜幕三分之一2020-06-28 15:21 回复
    • barben
      你可以简单理解new Vue是写在.js文件中的,而export default是写在.vue文件中的。在vue完整项目中的写法需要改一改。
      barben2020-08-19 16:44 回复