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

百度搜了很久，jQuery方法在react里会报错，终于找到了一个可以实现的第三方库cnchar。可以实现拼音首字母以及汉字模糊查询

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

<Select
                        showSearch
                        optionFilterProp="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;
        }
    };