インクリメンタルサーチ

ポケモンカードの検索ページを作ってみた(　´ω｀　)


インクリメンタルサーチ (incremental search) とは、
通常の検索したい用語を全て入力した上で検索を実行する形式ではなく、
ユーザーの入力処理を受けるたびにただちに検索リストに
結果が反映されるような検索方法である。

逐次検索、ライブサーチ、などともいう。

Google の検索フォームに文字を入力するとそれに応じた検索候補が
ドロップダウンリストに出てくる、これもインクリメンタルサーチの一例だろう。


ぐぐってみると JavaScript や PHP などでもこれを実装するライブラリがいくつか見つかるが、
面白そうなので趣味的に今回は自分でそれっぽく実装してみることにした。


ちょうど XY シリーズも終わり、サン・ムーンシリーズが始まるこの時期、
ポケモンカードのデータを使って逐次的な検索システムを作ってみたいと思う。


jQuery を使って入力用のフォームに対して

.on(’keyup’, function(){　検索処理　});

みたいなことを書けばすぐに実現できそうではあったので、

ポケモンカードデータベースの XML を用意して Ajax の XMLHttpRequest から DOM を
取得しておいて検索処理を行うようにしてみた。

結果・・・


・・・重いっっ！　尋常ではない重たさ、１ 文字打つたびにﾋﾞﾀｧｯと止まる！！＃


よくよく考えてみなくても途中で薄々感じてた通りの結果で実に予想通り(・´ω・｀)


ポケモンカードのデータベース用 XML のデータ量の多さ、
万単位の DOM 要素に対して 1 文字打つたびに検索してたらそりゃあ重い。


検索対象をカード名称のみに絞るとかすればそれなりに高速ではあったが、
ワザなどのテキストを検索できないと機能的に残念臭がするだろう。

そんなわけで雑ではあるが XML の内容を JavaScript の配列に変換してカラムごとに
インデックスを作成し、頑張って検索してもらうようにした。

変換したデータベース用 js ファイルのサイズが 2M を超えた。こりゃでかい(・´ω・｀)

検索処理も

if(presentInputText !== previousInputText)
{
　　clearTimeout(previousFunction);
　　previousFunction = setTimeout(function(){　検索処理　}, 800);
}

みたいな風に setTimeout() で入力の手が止まるのを待つような
感じにするとそこまでビタビタ止まる感じはしなくなったような気がする。

そんなわけでひとまず完成したポケモンカードのカードリスト検索ページが以下　↓
動作確認したの Chrome だけなので念のため Chrome 推奨。


http://pilkul.s602.xrea.com/pokeca/cardlist.html


・・・最初よりは結構軽くなったんだけど、やっぱ結構重たいな(　´∀｀　)しょうがないべ

プログラマやってる人ならもっとスマートなやり方色々あるんだろうな(´ω｀

カードリストのレンダリングにも時間かかるんだろうし
PC のスペックが不足気味な人はご利用は要注意や（ｒ


一応ワザの説明文とかもちゃんと検索対象になってるぞ。

「コイン」　とか　「マヒ」　とか　「ヤミラミ」　とか色々入力してみて(´∀｀

検索項目のフィルタもクリックする度にリストに適用されるぞ。


なんかバグとか改善点見つけたらコメントしてくれると助かるぜ(´∀｀