antd-select ピンインの最初の文字のファジー クエリ

Baidu で長い間検索した後、jQuery メソッドは react でエラーを報告し、最終的に実装できるサードパーティ ライブラリ cnchar を見つけました。ピンインのイニシャルと漢字のあいまいクエリを実現できます

cnchar

インストール

npm i cnchar

導入

使用済みページにインポート

import cnchar from 'cnchar';

使用

スペルメソッド

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

ストローク法

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

ドロップダウンボックス

データ

専用の部門テーブルがあり、電話番号テーブルの部門エントリは部門テーブルのIDを使用しているため、値を使用してIDを記録すると、提出時のデータ取得に便利です。label は部門テーブルに部門名を設定します

//下拉框以及数据
    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 によって表示されるコンテンツをラベルに設定します。デフォルトは、
入力項目に従ってフィルタリングする値 filterOption です。関数の場合は、inputValue と option の 2 つのパラメーターを受け取り、オプションがフィルター条件を満たす場合は true、そうでない場合は false を返します。

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

書き換えフィルター機能

input は入力内容です。私のコンテンツはラベルなので、option.label を使用して一致させます。option.label.spell('first') ラベル コンテンツの最初の文字を取得します。一致させるために、文字列を小文字に置き換えます。

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