一覧からのキャラ名検索
キャラ一覧を表示できたけど、キャラ数が多いとアイコンだけを見てキャラを探すのはさすがに効率わるすぎ。
ということで、UIにキーワード検索機能を追加したくなった。
・キャラ名をキー入力するための欄を追加する。
・キャラ名を入力すると、そのキャラが見えるようにする。
キャラ名を入力するための欄を追加
INPUTタグを使うとキー入力欄を追加できるとのこと。
こんな感じ。
<input type="text" id="char-search-input" placeholder="キャラ名検索...">
「type」には、いろいろ指定可能とのことだが、一番簡単な「text」を指定した。
「placeholder」は、未入力状態の時の「ガイダンス」を指定するらしい。
検索キーワードの指定
検索したい対象のキャラ名（キーワード）を指定しないと、そもそも検索できない。
ということで、前述のIMGタグにキャラ名を指定する。簡単なのは「title」属性らしい。
<div class="char-item" id="char-item">
<img class="base" src="..." data-filename="..." title="<キャラ名>" alt="">
</div>
イベントハンドラ（検索トリガー）を仕込む
キー入力したことを通知してもらうために「イベントハンドラ」をINPUTタグに指定する。
oninputイベントハンドラ
const charSeachInput = `char-search-input`
document!.getElementById(charSeachInput)!.oninput = (e) => {}
これで、キー入力したことがイベントハンドラへ通知される。
どういう内容かは「e」のプロパティを確認することになる。
document!.getElementById(charSeachInput)!.oninput = (e) => {
if (e !== null && e.target !== null) {
const input = e.target as HTMLInputElement
const keyword = input.value //入力した内容
}
}
検索とスクロール
まずは検索
キーワード入力した内容を元に、一致するキャラ名を設定したIMGを検索する。
const itemCss = `.char-item`
const target = document.querySelector(`${itemCss} div[title="${keyword}"]`)
さらに、IMGタグを持っているタグ（この場合、DIVタグ）を見つける。
const parent = target.closest(itemCss)
※IMGがDIVに内包されていない場合は、このステップは不要です。
見つけたタグまでスクロール
parent.scrollIntoView({
behavior: 'smooth', // スムーススクロール！
block: 'center' // 画面の真ん中に持ってくる
})
部分一致検索するには
前述の「querySelectorAll」への指定は完全一致検索になる。
部分一致にしたい場合は、こんな感じらしい。
const targets = document.querySelectorAll(`${itemCss} div[title*="${keyword}"]`)
「*」で部分一致になるのね。
次は検索結果からの選択
ぷよクエって、キャラの亜種（似たような名前のキャラ）がたくさんあるので、前述の検索結果では機能的にかなり物足りないので、部分一致したキャラ名をコンボボックスに格納して、そこから検索出来たら便利かなっということで。