やりたいこと
都道府県のセレクトボックスを Select2 で作る。フォーム入力で選択肢を絞りこめるが、このとき選択肢文字列だけではなくひらがな、アルファベット (半角) でも絞り込めるようにしたい。
Select2 に渡す選択肢の配列は次を想定している。
const options = [
{ id: "1", text: "北海道", hiragana: "ほっかいどう", alphabet: "hokkaido" },
{ id: "2", text: "青森県", hiragana: "あおもりけん", alphabet: "aomoriken" },
{ id: "3", text: "岩手県", hiragana: "いわてけん", alphabet: "iwateken" },
{ id: "4", text: "宮城県", hiragana: "みやぎけん", alphabet: "miyagiken" },
{ id: "5", text: "秋田県", hiragana: "あきたけん", alphabet: "akitaken" },
];
ちなみに本投稿は Vue.js 3 で Select2 をラップして SFC (シングルファイルコンポーネント) としてコンポーネント化する例 – oki2a24 の続きにあたります。
まとめ
次のことを行えば可能と予想し、実際に実現できました。
- Select2 へ渡す Options に適当なプロパティ A, B を追加する。
- Select2 で絞り込むときにプロパティ A, B も含めて検索する。
