派遣のお仕事情報満載!!アドバンティアで求人検索

【Javascript】Choices.jsのひらがな・カタカタ・漢字でのフィルタリング機能をカスタマイズしてみた

YK
【Javascript】Choices.jsのひらがな・カタカタ・漢字でのフィルタリング機能をカスタマイズしてみた

はじめに

selectに検索機能を追加する際に使用される『choices.js』ですが、
使用しているさなかフィルタリングにて期待通りの結果にならなかった事があり、
そのカスタマイズした内容を自分自身の覚書として記事にしました。

開発環境

  • choices 11.0.2
  • jQuery 3.4.1

期待値と現状

ひらがな・カタカナ・漢字で選択候補をフィルタリングした際、
2文字以上の検索ワードを入力した場合、1文字ずつのORでのフィルタリング結果となり、
入力した検索ワード全てでのフィルタリング結果を取得することができませんでした。

期待値

検索ワード:藤井

検索結果:藤井

現状

検索ワード:藤井

検索結果:藤井、佐藤

コード

HTML

<select class="js-choices">
    <option value="">選択</option>
    <option value="松原">松原</option>
    <option value="藤井">藤井</option>
    <option value="佐藤">佐藤</option>
    <option value="高松">高松</option>
    <option value="石松">石松</option>
    <option value="松下">松下</option>
</select>

jQury

setChoices('.js-choices');
function setChoices(select_class) {
    jQuery(select_class).each(function() {
        const choices = new Choices(this, {
            searchEnabled: true,
            searchFields: ['label', 'value'],
            removeItemButton: true,
            noResultsText: '一致する情報は見つかりません',
            itemSelectText: '選択',
            shouldSort: false,
        });
    });
}

カスタマイズコード

setChoices('.js-choices');
function setChoices(select_class) {
    jQuery(select_class).each(function() {
        const choices = new Choices(this, {
            searchEnabled: true,
            searchFields: ['label', 'value'],
            removeItemButton: true,
            noResultsText: '一致する情報は見つかりません',
            itemSelectText: '選択',
            shouldSort: false,
        });

        // 検索入力のハンドリング
        this.addEventListener('search', function(event) {
            const searchString = event.detail.value.toLowerCase();
            const items = choices.passedElement.element;

            // 入力された文字に一致する選択肢をフィルタリング
            const filteredItems = Array.from(items).filter(item => {
                return item.label.toLowerCase().includes(searchString) ||
                    item.value.toLowerCase().includes(searchString);
            });

            // フィルタリングされたアイテムがない場合は、`noResultsText` を表示
            if (filteredItems.length === 0) {
                choices.noResultsText = '一致する情報は見つかりません';
            } else {
                choices.noResultsText = '';
            }

            // 選択肢を更新
            choices.setChoices(filteredItems, 'value', 'label', true);
        }, true);

        // 入力値が空白の場合、選択項目の絞り込みを解除
        document.addEventListener('keyup', function(event) {
            if (event.target.matches('.choices__input')) {
                if (!event.target.value) {
                    choices.clearInput();
                    choices.clearChoices();
                    choices.refresh();
                }
            }
        });

        // ドロップダウン表示時のハンドリング
        this.addEventListener('showDropdown', function(event) {
            choices.clearInput();
            choices.clearChoices();
            choices.refresh();
        }, false);

        // ドロップダウン非表示時のハンドリング
        this.addEventListener('hideDropdown', function(event) {
            choices.clearInput();
            choices.clearChoices();
            choices.refresh();
        }, false);
    });
}

まとめ

カスタマイズした内容は以上になります。
上記はあくまでも一例です。より簡潔なカスタマイズ方法もあるかもしれません。
みなさんも試してみてはいかがでしょうか?
今回の記事が、みなさんの快適なプログラミングの一翼を担えれば幸いです。

「東三河・西三河で働く!」高時給な派遣求人が満載!

CTA-IMAGE いまあなたは転職活動で困っていませんか? 「こんなに転職活動を頑張っているのに、良い職場に出会えないのだろう?」 そんな悩みがあるなら派遣会社アドバンティアで解決しましょう! 軽作業・工場系・事務系のお仕事が満載!! 高時給!週払い可能!家電付きアパート・マンションを貸し出し♪車・携帯レンタル可能!アドバンティアは充実したサポート体制であなたのご応募をお待ちしております。 TEL面接実施中!!

>> アドバンティア求人検索はこちら <<

このページを評価してください

[kkstarratings force]