cnchar

安装

npm i cnchar

引入

在使用的页面导入

import cnchar from 'cnchar';

使用

spell方法

var spell1 = cnchar.spell("你好", "array", "tone", "poly"); // 数组分割、带音调、候选多音字
var spell2 = cnchar.spell('汉字拼音','first', 'low'); // 首字母小写
var spell3 = cnchar.spell('長城'); // 支持繁体字（依赖cnchar-trad库）
var spell4 = cnchar.spell('長城','simple'); // 禁用繁体字拼音
var spell5 = "你好".spell(); // string prototype 调用
console.log(spell1);
console.log(spell2);
console.log(spell3);
console.log(spell4);
console.log(spell5);

运行结果：

[ "Nǐ", "(Hǎo|Hào)" ]
hzpy
ChangCheng
長Cheng
NiHao

stroke方法

var stroke1 = cnchar.stroke('汉字笔划', 'array'); // 数组分割
var stroke2 = cnchar.stroke("你好", "order", "name"); // 数组分割、启用笔划（依赖cnchar-order库）
var stroke3 = cnchar.stroke('長城', 'array'); // 支持繁体字（依赖cnchar-trad库）
var stroke4 = cnchar.stroke('長城', 'simple', 'array'); // 禁用繁体字笔划数
var stroke5 = "你好".stroke(); // string prototype 调用
console.log(stroke1);
console.log(stroke2);
console.log(stroke3);
console.log(stroke4);
console.log(stroke5);

运行结果：

[ 5, 6, 10, 6 ]
[ [ "撇", "竖", "撇", "横撇|横钩", "竖钩", "撇", "点" ], [ "撇点", "撇", "横", "横撇|横钩", "竖钩", "横" ] ]
[ 8, 9 ]
[ 0, 9 ]
13

下拉框

数据

有专门的department表，phone表内的department条目用的department表的id，所以用value记录id方便提交时数据的获取。label设置department表内的部门名称

//下拉框以及数据const deoptions=[];for(let item in de) {const key1 = de[item].id;const key2 = de[item].department;const obj = {'value': key1,'label': key2};deoptions.push(obj)}

下拉框

optionFilterProp设置select显示的内容设置为label。默认为value
filterOption根据输入项进行筛选。当其为一个函数时，接收inputValue，option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false

<SelectshowSearchoptionFilterProp="label"filterOption={(input, option) =>selectPinYin(input, option)}options={deoptions}></Select>

重写筛选函数

input为输入内容。因为我的内容是label，所以用option.label来匹配。option.label.spell(‘first’)获取label内容的首字母，为了匹配，将字符串换成小写。

const selectPinYin = ( input, option ) => {//如果以拼音首字母输入搜索if (input.charCodeAt() >= 32 && input.charCodeAt() <= 126) {return option.label.spell('first').toLowerCase().indexOf(input.toLowerCase()) >= 0;//如果以中文输入搜索} else {return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;}};

antd-select拼音首字母模糊查询相关推荐

mysq根据首字母模糊检索，拼音首字母模糊查询名称
Mysql 数据库根据拼音首字母模糊查询名称前言一.导入数据库二.使用SQL进行查询总结前言当我们的项目运行了一段时间,突然增加个需求,要按照内容标题的首字母进行查询时,这时我们只需导入一 ...
Oracle——根据拼音首字母模糊查询某个字段
前言 Oracle数据库模糊查询数据,可以用like关键字: 但是,业务上有时候需要根据拼音首字母模糊查询某个字段,这时候考虑的点就比较多了问题解决解决方法有3种: 1. 表中添加一个字段表示拼音 ...
jquery easyui实现汉字拼音首字母模糊查询
本片文章并非原创,而是将网上的方法整理了一下:网上给出的代码不一定完全适合自己的项目,具体的要更加自己的情况修改: 不要直接复制粘贴代码,这样是行不通的:自己要理解前人这样实现的目的和原理在实现这个 ...
combotree按首字母模糊查询
首先根据网上搜索的方法为combotree增加query的方法: //combotree首字母模糊查询 (function(){ $.fn.combotree.defaults.edita ...
java 拼音模糊查询_java实现首字母模糊查询的功能
①,要实现首字母模糊匹配,首先我们需要得到你要搜索内容的首字母,对于java来说,有一个非常实用的包:pinyin4j.jar. 这个拼音包中的PinyinHelper 方法可以得到String的首字 ...
java 首字母检索_java实现首字母模糊查询的功能
①,要实现首字母模糊匹配,首先我们需要得到你要搜索内容的首字母,对于java来说,有一个非常实用的包:pinyin4j.jar. 这个拼音包中的PinyinHelper 方法可以得到String的首字 ...
mysql查询汉字拼音首字母_MySQL查询汉字的拼音首字母实例教程
最好的方法还是用 PHP 来取拼音首字母,在 MySQL 里新建一个字段来存放 php 里查询汉字的拼音首字母已经有很多参考的代码了. 现在给出在mysql 里实现的, 测试环境是mysql-5.0. ...
拼音中文首字母大写查询
最新的商城项目需要用到拼音首字母大写查询,首先想加个字段存中文拼音的,觉得太麻烦,还是用sql解决快一些,lz用的是mysql. 解决的思路就是创建个函数调用,如果用工具navicat,则可以建立如下 ...
asp.net 获取汉字字符串的拼音首字母，含多音字
需求:在很多时候数据查询的时候,我们希望输入某个人姓名的拼音首字母进行查询,例如"潘长江",输入"pcj",就能搜索潘长江相关信息. 实现: #region 获 ...
php 汉字按字母排序,在PHP中，将一个汉字数组按照拼音首字母进行排序
(之前发的这篇博文因为含有敏感关键字,只好重发一遍了) $str = "我们可以在浏览器中看到,当鼠标移到元素上时,元素开始向右移动,开始比较慢,之后则比较快,移开时按原曲线回到原点.&qu ...

antd-select拼音首字母模糊查询

antd-select拼音首字母以及汉字模糊查询

cnchar

安装

引入

使用

spell方法

stroke方法

下拉框

数据

下拉框

重写筛选函数

antd-select拼音首字母模糊查询相关推荐

最新文章

热门文章