キャラ名の部分一致検索による候補表示
一致検索ではキャラの亜種（似たようなキャラ名）を検索できないので不便に感じた。
あと、シリーズ内キャラがいったい何個あるのか調べるにも便利かもと。
■UIイメージ
処理シチュエーションはこんな感じ。
・キャラ名を入力する
・入力内容を含むキャラ名を部分一致検索する
・検索結果をコンボボックスへ入れる
・コンボボックスからキャラを選択して該当のキャラへスクロールする
前回の実装に以下を追加変更する。
| 実装 | 処理概要 |
|---|---|
| 変更 | 入力内容を含むキャラ名を部分一致検索する |
| 追加 | 検索結果をコンボボックスへ入れる |
| 追加 | コンボボックスからキャラを選択、該当のキャラへスクロールする |
前回の内容は以下を参照してください。
https://qiita.com/puyon/items/74c85d59e63b40572ed7
キャラ名の部分一致検索
部分一致検索は前回の通り。
タグに「title」属性をつけている前提でこんな感じ。
const targets = document.querySelectorAll(`${itemCss} div[title*="${keyword}"]`)
要するに検索結果がtargetsに入ってくるので、これをコンボボックスに入れるといいみたい。
検索結果をコンボボックスへ入れる
コンボボックスを作るのは「select」タグと「option」タグを使うらしい。
それぞれ役割分担しているとのこと。
| タグ | 役割 |
|---|---|
| select | コンボボックスの外側 |
| option | コンボボックスの選択肢 |
コンボボックスの選択肢を作成
「targets」を元にHTMLを作るのはこんな感じ。
let index = -1
let optionHtmls = ``
for (const t of targets) {
const elem = t as HTMLElement
index++
const value = elem.title.trim()
const title = value
const selected = index === 0 ? " selected" : ""
const optionHtml = `
<option value="${value}"${selected}>${title}</option>
`.trim()
optionHtmls += optionHtml
}
コンボボックスの外側を作成
HTMLが作れたので、「select」タグのインスタンスを作成する。
const select = document.createElement("select")
const comboName = "char-search-combo"
select.id = comboName
select.className = comboName
select.innerHTML = optionHtmls
キャラ名を選択したときの動作を入れる
キャラ名を選択したことを通知してもらうには、イベントリスナーを作成するらしい。
select.addEventListener("change", (ev) => {})
キャラを選択したら「ev」に選択結果が通知される。
select.addEventListener("change", (ev) => {
const target = ev.target as HTMLSelectElement
const keyword = target.value //選択したキャラ名
//keywordを使って一致検索する
})
次回は。
図鑑アプリとしては、とりあえず機能するようになった。
ただ、ちょっとした不満がでてきた。
・表示位置が同じ。移動したいな。
・ブラウザ内に、キャラ選択UI以外のUIを表示したい。