前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >拼音搜索的简单实现方案

拼音搜索的简单实现方案

作者头像
华创信息技术
发布2020-05-29 15:49:47
1.7K0
发布2020-05-29 15:49:47
举报
文章被收录于专栏:华创信息技术华创信息技术

文章时间:2020年5月28日 13:37:18 解决问题:在搜索框搜索某些东西的时候,我们经常输入了拼音,依然也可以显示搜索出的文字。 所用插件:ChinesePY.js 投稿人:梦群同学

ChinesePY 嵌入使用方法

首先在Github下载ChinesePY.js [下载地址]

下载完成后在项目 main.js 中引入

代码语言:javascript
复制
import Pinyin from './ChinesePY' // 你的该文件位置

使用方法及返回格式

代码语言:javascript
复制
Pinyin.GetJP('中国') // 获取简拼 -> ZH (注意 简拼返回值为大写)
Pinyin.GetQP('中国') // 获取全拼 -> zhongguo
Pinyin.GetHP('中国') // 获取混拼 -> zhongg

手写自己的根据拼音查询 公共函数

代码语言:javascript
复制
Vue.prototype.$pinyin = (restaurant: string, queryString: string): boolean => {
  const jp = Pinyin.GetJP(restaurant)
  const qp = Pinyin.GetQP(restaurant)
  const hp = Pinyin.GetHP(restaurant)
  const rgx = new RegExp(queryString, 'gi')
  return rgx.test(jp) || rgx.test(qp) || rgx.test(hp)
}

// restaurant -> 需要检索的字符串
// queryString -> 输入的字符串

使用

代码语言:javascript
复制
{
    methods: {
        handle() {
            const value = this.$pinyin('中国', searchString)
            if(value) {
                // todu something
            } else {
                // todu something
            }
        }
    }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-05-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ChinesePY 嵌入使用方法
    • 下载完成后在项目 main.js 中引入
      • 使用方法及返回格式
        • 手写自己的根据拼音查询 公共函数
          • 使用
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档