纯前端支持拼音搜索功能

最新推荐文章于 2023-07-20 10:06:53 发布
最新推荐文章于 2023-07-20 10:06:53 发布
阅读量1k 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39691383/article/details/121967918
版权

参考文档：js-pinyin

先安装

npm install js-pinyin

再引入拼音插件

import jsPINYIN from 'js-pinyin';

使用

obj.pinyin = jsPINYIN.getFullChars(name).toLowerCase() + name;

获取中文名称的拼音拼接上中文，即可实现纯前端的支持拼音搜索功能

小新a
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超强悍的select支持汉字、拼音首字母、英文搜索方式
08-29
超强悍的支持汉字、拼音首字母、英文搜索方式 是对selectseach的改进、升级版 1.把下拉列表从右边移到了下边，根原始的一样。 2.修复了对多音字失效的bug. 3.简化了使用方法:对任意一个不需要做任何改动，只需加入以下代码: $('#select1').selectseach('/img/'); (这里假设图片放在了‘/img/’下)。
pinyin-match选择器拼音快速检索目标
前端开发工程师博客
09-26 833
pinyin-match选择器拼音快速检索目标。
前端拼音（汉字）检索，好用的插件 pinyin-match
IT_dabai的博客
08-12 1561
好用的前端拼音检索插件（汉字也可检索），无需请求后端接口，只需针对当前已获取的数据源进行操作，对符合条件的数据进行返回显示，即可完成拼音检索
如何实现JS拼音下拉搜索
wodianping的博客
07-20 319
需要注意的是，API返回的是一个二维数组，我们需要通过flat()方法将其展开成一维数组，再通过join()方法将其拼接成一个拼音字符串。在JS开发中，实现拼音下拉搜索也是非常常见的一种需求，笔者今天将介绍如何实现JS拼音下拉搜索。这个函数接受一个input元素作为参数，通过调用pinyin.js的API、使用数组的filter()方法、操作DOM节点等，实现了拼音下拉搜索的功能。我们需要引入一个拼音库，这里我推荐使用pinyin.js，它是一个纯JS实现的汉字转拼音库，非常方便好用。
前端js实现模糊搜索和拼音搜索
lz_6z的博客
08-11 2475
用pinyin库实现模糊搜索和拼音搜索
JS实现拼音(字母)匹配(搜索)汉字(姓名)
m0_51431448的博客
04-26 4141
这就是个模糊查询，我们平常做的都是直接输入汉字去把对应的值过滤出来，但我还真是第一次通过拼音去查询（当然不只是拼音，汉字也是可以的），以前还真没注意这个。唉，这可咋搞，我怎么知道某个汉字（字符串）的拼音的首字母是什么呢？正当我愁眉苦脸的时候，哎，一个库被我发现了，hhhhh~。就是pinyin-match。下面介绍该包的使用，这个包也不大，四百多kb。蛮高效的。下面介绍一下该库的使用。
纯前端实现拼音搜索
weixin_44143279的博客
11-17 1530
select实现前端拼音搜索
jQuery实现的简单前端搜索功能示例
10-19
主要介绍了jQuery实现的简单前端搜索功能,涉及jQuery事件响应与页面元素遍历、匹配、动态设置等相关操作技巧,需要的朋友可以参考下
JavaScript实现前端实时搜索功能
10-20
主要为大家详细介绍了JavaScript实现前端实时搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3 纯前端 验证码功能
最新发布
11-14
vue3 纯前端 验证码功能
前端js全拼简拼搜索汉字
01-04
前端不作很严格的要求进行部份字段的简拼、全拼字段的搜索汉字，不严格要求可以使用，基本包含常用汉字。
史上最强大的select控件(可搜索的下拉框)，支持汉字中文、拼音首字母、英文搜索方式
05-11
依赖高版本的jquery ，适应各种高版本的浏览器。 调用方法： 对任意一个select元素，例如 《select id="select1"》 不需要做任何改动，只需加入以下代码: $('#select1').selectseach('/img/'); (这里假设图片放在了‘/img/’下)
下拉列表支持拼音简拼、全拼、汉字搜索。
07-08
下拉列表支持拼音简拼、全拼、汉字搜索。具体的使用方法请阅读。http://blog.csdn.net/mdcmy/article/details/9272949
汉字拼音搜索功能
04-04
源码ZYPinYinSearch，ZYPinYinSearch,汉字拼音搜索，数组里可存NSString，NSDictionary，Model，后面两个可以指定按照某字段搜索。 1.导入ZYPinYinSearchLib文件夹到自己项目中 2.#import "ZYPinYinSearch.h" 3.调用方法 /** * 搜索数组，返回新的数组。目前支持NSString，NSDictionnary，自定义Model，后面两个可以指定按照哪个字段搜索 * * @param originalArray 要搜索的数据源 * @param searchText 搜索的文本 * @param propertyName 按照字典中或者model中哪个字段搜索，如果数组中存的是NSString，则传@""即可 * @example _dataSourceArray = [ZYPinYinSearch searchWithOriginalArray:_originalArray andSearchText:searchBar.text andSearchByPropertyName:@"name"]; */ +(NSArray *)searchWithOriginalArray:(NSArray *)originalArray andSearchText:(NSString *)searchText andSearchByPropertyName:(NSString *)propertyName; 测试环境：Xcode 6.2，iOS 6.0 以上
下拉搜索（可拼音搜索）功能
05-30
以chosen.jQuery.js与pinyin.js两个文件合并成可根据拼音搜索中文的下拉功能目前支持每个中文的首字母查询，如果需要全拼音查询，只需修改chosen.jquery.js 344行左右处，把search_string_m = ping[0];改成search_string_m = ping[1];即可。
vue2 前端搜索实现示例
08-27
本篇文章主要介绍了 Vue2 前端搜索实现示例，通过对搜索功能的实现，展示了 Vue2 的强大功能。下面是对该示例的详细分析和知识点总结。 搜索实现原理 搜索实现的原理非常简单，即通过在输入框中输入搜索条件，然后...
前端拼音首字母搜索姓名
brokenkay的博客
08-20 1万+
需求:在搜索框中根据拼音首字母来快速搜索出人名.例如曾琴琴(曾是多音字),可以通过输入["z","c","zq","cq","zqq","cqq"]这六种情况显示出匹配曾琴琴的结果. 效果图: 开发思路:当用户在输入框中...
vue汉字转拼音-pinyin.js
A54324的博客
08-25 3434
安装项目到项目目录下，不会将模块依赖写入或。:-g的意思是将模块安装到全局，不是安装到当前目录的项目下:-save的意思是将模块安装到项目目录下，并在package文件的节点写入依赖。-save-dev的意思是将模块安装到项目目录下，并在package文件的节点写入依赖。
Layui-select 下拉框实现拼音全拼匹配/首字母模糊搜索
热门推荐
仰淳的博客
05-13 7万+
Layui layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架。亲测很好用，很好看。 官网：http://www.layui.com/ github：https://github.com/sentsin/layui 研究select搜索功能的实现 layui的select组件自带搜索功能，只要在select标签里面添加属性search=”“即可。 但是如果...
vue 纯前端搜索功能实现
05-12
Vue 纯前端搜索功能可以通过过滤数组来实现。以下是一个简单的实现示例： 1. 在 Vue 实例中定义一个数组，作为搜索的数据源。 ``` data() { return { items: [ { name: 'apple', price: 1.99 }, { name: 'banana', price: 0.99 }, { name: 'orange', price: 1.49 }, { name: 'watermelon', price: 2.99 } ], searchTerm: '' } } ``` 2. 在 template 中添加一个搜索框和一个列表展示搜索结果。 ``` <template> <div> <input type="text" v-model="searchTerm" placeholder="Search..."> <ul> <li v-for="item in filteredItems">{{ item.name }} - {{ item.price }}</li> </ul> </div> </template> ``` 3. 在 computed 中添加一个过滤函数，根据搜索词过滤数组。 ``` computed: { filteredItems() { return this.items.filter(item => item.name.toLowerCase().includes(this.searchTerm.toLowerCase())) } } ``` 这样，当用户输入搜索词后，列表会自动展示包含该搜索词的项。 完整代码如下： ``` <template> <div> <input type="text" v-model="searchTerm" placeholder="Search..."> <ul> <li v-for="item in filteredItems">{{ item.name }} - {{ item.price }}</li> </ul> </div> </template> <script> export default { data() { return { items: [ { name: 'apple', price: 1.99 }, { name: 'banana', price: 0.99 }, { name: 'orange', price: 1.49 }, { name: 'watermelon', price: 2.99 } ], searchTerm: '' } }, computed: { filteredItems() { return this.items.filter(item => item.name.toLowerCase().includes(this.searchTerm.toLowerCase())) } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值