前端搜索的简单实现

2023-08-31 09:47| 来源: 网络整理| 查看: 265

最近做项目时需要写一个搜索功能，刚开始的时候觉得这功能挺厉害，挺牛逼的，自己做的时候也有点懵逼，上手之后觉得还行，哈哈。下面便是我对搜索这一功能的实现。希望对像我这样的小白有帮助。

精准搜索

**核心思想：**将用户输入的字符串作为一个整体去与数组的每一项做匹配，把符合的保存下来即可。我们先看一下效果图这里主要用到的JavaScript字符串的indexOf()方法——返回某个指定的字符串值在字符串中首次出现的位置，如果不存在，则返回-1。

有一点需要注意，`indexOf()` 方法对大小写敏感！另外数组也有一个`indexOf()`方法

下面是上述实例的完整代码，当然实际开发的时候数据肯定没这么简单。我们这里使用的是Vue + Element

实现 {{ item.name }} export default { data() { return { searchMsg: "", checkList: [], filterMsg: [] }; }, mounted() { this.allMsg = [ { name: "myhua", id: 1 }, { name: "mp3", id: 2 }, { name: "hello", id: 3 }, { name: "world", id: 4 }, { name: "warm weather", id: 5 }, { name: "m3", id: 6 }, { name: "hahaha", id: 7 } ]; this.filterMsg = this.allMsg; }, methods: { // 搜索方法 handleSearch(queryString) { this.filterMsg = []; this.allMsg.map(item => { if (item.name.indexOf(queryString) !== -1) { this.filterMsg.push(item); } }); } } };

另外字符串的search()方法在这里也能实现相同的效果，对大小写敏感在这里推荐使用includes，这样更语义化一些，自己有点懒这里就没改

模糊搜索

**核心思想：**将用户输入的字符串进行拆分去与数组的每一项做匹配，把符合的保存下来即可。要进行拆分这里就需要用到正则表达式效果图：

实现 // 其余代码同上 handleSearch(queryString) { let queryStringArr = queryString.split(""); let str = "(.*?)"; this.filterMsg = []; let regStr = str + queryStringArr.join(str) + str; let reg = RegExp(regStr, "i"); // 以mh为例生成的正则表达式为/(.*?)m(.*?)h(.*?)/i this.allMsg.map(item => { if (reg.test(item.name)) { this.filterMsg.push(item); } }); } 拼音搜索

核心思想：先获取的汉字的拼音，然后对其进行匹配获取汉字的拼音我这里使用的是pinyin；简单介说一下pinyin包的用法

import py from "pinyin"; py("中心"); // [ [ 'zhōng' ], [ 'xīn' ] ] 默认是带声调的 py("中心", { heteronym: true // 配置一些设置项，启用多音字模式 }); // [ [ 'zhōng', 'zhòng' ], [ 'xīn' ] ]

如果你有兴趣想了解一下汉字转拼音的话，可以看一下这篇文章JavaScript 之 300 行代码搞定汉字转拼音，不过这篇文章所写的包为能解决多音字的问题效果图：拼音搜索

实现 // 其余代码同上 import py from "pinyin"; mounted() { this.allMsg = [ { name: "薛之谦", id: 1 }, { name: "霍建华", id: 2 }, { name: "蔡徐坤", id: 3 }, { name: "胡歌", id: 4 }, { name: "胡说", id: 5 } ]; this.filterMsg = this.allMsg; }, methods: { handleSearch(queryString) { let queryStringArr = queryString.split(""); let str = "(.*?)"; let regStr = str + queryStringArr.join(str) + str; let reg = RegExp(regStr, "i"); this.filterMsg = []; console.log(reg); this.allMsg.map(item => { // 获取汉字的拼音，并进行扁平化 let pyArr = py(item.name, { style: py.STYLE_NORMAL // 设置拼音风格设置为普通风格（不带声调）， }).flat(); let pyStr = pyArr.join(""); if (reg.test(pyStr)) { this.filterMsg.push(item); } }); } }

最后

不同的场景各自的需求都不一样，有可能你会用到上面的一种，也有可能你需要将上面提到的三种方式整合起来形成一个综合搜索。另外——按更优的体验来讲，我们应该对搜索到的结果根据需求进行排序，对关键字进行高亮展示。这里我就不给大家展示了😁至于这以上三种方式的性能嘛，我自己感觉还不错，用着还行。希望有经验的大佬能够指点一二

【本文地址】

公司简介

联系我们