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

        // 検索入力のハンドリング
        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);