前端借助pinyin-match库实现拼音模糊搜索

今天介绍一个有意思的js库

pinyin-match是一个轻量级的js库, 能够帮助我们使用拼音以及拼音中文混合进行搜索定位, 方便我们给UI加标记进行高亮

那么他能用到哪些地方呢?

比如商品搜索, 用户联系人搜索, 长文本全局搜索等等

用户输入hw, 我们可以检索到华为相关的信息并展示我们今天来使用该库实现一个搜索功能

需要我们先安装下pinyin-match

npm install pinyin-match --save

安装完成之后, 我们进行引入

import PinyinMatch from "pinyin-match";

现在我们调用下match方法, 会返回列表或者布尔类型的值, 如果没有匹配到就会返回false, 反之会返回字符串的索引位置信息

handleMatch() {    let str = "她的码农";    console.log(PinyinMatch.match(str, "d"), "d");    console.log(PinyinMatch.match(str, "td"), "td");    console.log(PinyinMatch.match(str, "manong"), "manong");},

可以看到结果可以匹配到我们现在写一个输入框, 根据输入内容匹配列表内容, 匹配到的我们就展示出来让AI生成一个页面, 看下效果

html和css忽略不计, 写下逻辑

<div class="input-wrapper">      <input        v-model="searchText"        class="search-input"        placeholder="搜索城市..."      />      <span class="search-icon">🔍</span> </div>    computed: {    filteredCities() {      if (!this.searchText) {        return this.cities;      }      return this.cities.filter((city) => {        return (          PinyinMatch.match(city.name, this.searchText) ||          PinyinMatch.match(city.province, this.searchText)        );      });    },  },

我们看一下效果

功能我们实现了今天我们就介绍到这里下期见