Vue3(CompositionApi)でサジェスト検索

さて、当アプリケーションはBootStrap4.2を利用して開発してましたが、BootStrap5がリリースされJqueryと決別

なんとなく、フロントエンド界的にもJqueryさようなら　的な流れになっているように感じます。

そんな中で、いつまでもBootStrap4のままにしておくと気づいたらバージョンが６とか７になって、

「書き方全然変わってるやないかい！」
「もうリプレイス無理！」

となること必須。

余談ですが、phpのフレームワークLaravel、勉強してみようって思いウェブサイトとかを参考に手を付けてみると

『同じコードを打っているはずなのに動かない！！なんでや！！ってなって』

よく調べると、参考にしたサイトで使用されていたLaravelのバージョンが古く、最新のLaravelって書き方全然変わってるやないかい！
となったことがあります。

（技術系の記事は開発環境のバージョンと執筆日の確認が必須だと学びました。）

そんなにコロコロ書き方が変わるフレームワークはついていけん！
結局裏で動いてるのはPHPじゃし！

・・・

とまあ、こんなことがあったので、早いうちに対応しとこうと思ったわけです。

少々脱線しましたが、BS5にするタイミングでどうせならJqueryからバイバイしようと決断したわけです。

さて、代わりに何を使おうか・・・なんとなくJS界隈ではReactとVueが賑わせている感じ

色々調べていくと、Vueのほうが日本語の文献が多く、言語としても柔軟性がありそう。バージョンも３になったばかりだし
記法もCompositionApiという新しい書き方がリリースされたタイミングだし

よし！Vueでいこう！と相成りました。

ようやく本題です。

いままでサジェスト検索にJqueryUIを利用していたのですが、当然こちらも使わなくなるわけで
どうやって実現しようかと色々調べてました。

が、現状、多くのサイトはVue2対応コンポーネントをcdnで使う前提やOptionsApiの記法で書かれたものばかり（Vue３になったばかりだから当たり前！）

結論として出たのは

「自作だな！」でした。

というわけでようやく本題。

『Vue3(cdn)＋CompsitionApi＋BootStrap5　でサジェスト検索（オートコンプリート）を自作しよう』
の始まりです。(BootStrap5はおまけです）

さて、そもそもサジェストってどうやってできてるんンだ？？

SELECTタグは文字打てないし・・・（てか出来てたら記事にもならんし）

サジェストの機能を分解して考えてみるか

・Inputタグにフォーカスがあたると、Inputタグの真下に選択肢一覧が下に表示される
・文字を入力すると、部分一致している選択肢のみ残る
・選択肢を選択するとInputタグに代入され、選択肢一覧は非表示になる

意外とシンプルじゃないか

選択肢のリストどうしようか、

selectタグのmultipleにしようか・・・と思ったけどinput・radio＋labelのほうがよさそうだな

などなど、試行錯誤した結果がこうです。

See the Pen Suggestion Search by Tarako0329 (@Tarako0329) on CodePen.

See the Pen Suggestion Search by Tarako0329 (@Tarako0329) on CodePen.

input-textタグの下にv-forでinput-radioのリストを配置。
input-textにフォーカスするとinput-radioリストを表示（v-show)。
v-forで回すリストはcomputedでinput-textの内容に部分一致しているリストを返すことで、選択肢を自動絞込。(input-textが空白の場合は全件リターン)
input-radioリストを選択すると、input-textに転写(v-model)して、v-showを閉じる。

ざっくりとこんな感じで実装できました！

（余談）
HTML+Jquery+Javascriptの混合で作ったWebアプリのHTML+Vue3へのリプレイス。やっと１画面終わったのですが、ファイルサイズが33kbから20kbまで圧縮されました。
JavaScriptって何？レベルから勉強しながら作ったアプリなので、開発当初はフレームワークなんて選択肢になかったのですが　Vueに置き換えるとコード量が減ってめっちゃシンプルにかけることがわかりました！