antd-select pinyin first letter fuzzy query

After searching on Baidu for a long time, the jQuery method will report an error in react, and finally found a third-party library cnchar that can be implemented. Can realize pinyin initials and fuzzy query of Chinese characters

cnchar

Install

npm i cnchar

introduce

Imported in the used page

import cnchar from 'cnchar';

use

spell method

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);

operation result:

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

stroke method

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);

operation result:

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

drop down box

data

There is a special department table, and the department entry in the phone table uses the id of the department table, so using the value to record the id is convenient for data acquisition during submission. label sets the department name in the department table

//下拉框以及数据
    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)
    }

drop down box

optionFilterProp sets the content displayed by select to label. The default is value
filterOption to filter according to the input item. When it is a function, it receives two parameters of inputValue and option. When the option meets the filtering conditions, it should return true, otherwise it should return false

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

Rewrite filter function

input is the input content. Because my content is label, I use option.label to match. option.label.spell('first') Get the first letter of the label content, in order to match, replace the string with lowercase.

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;
        }
    };