rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

将棋棋士データベースで遊ぶ(6)〜クイックサーチ機能を作る〜

      2017/04/19   JavaScript, 将棋, 生活, 開発 ,

  • このエントリーをはてなブックマークに追加
  • Pocket

※この記事は「将棋 Advent Calendar 2016 – Adventar」の18日目です。

将棋連盟の棋士データベースは、現役/引退棋士、棋士番号順一覧、50音順一覧などカテゴライズされていて棋士が探しやすいように工夫されていますが、名前や出身地など漠然としたフリーキーワードで検索できるともっと便利になる気がします。

というわけで、キーワードでリアルタイムに絞り込み検索できる機能を作ってみました。

棋士データベース クイックサーチ

さて、こんな感じに検索ページができあがりました。

棋士データベースクイックサーチ

キーワードを入力すると、棋士番号、氏名、出身地、区分のいずれかに文字が含まれる棋士が絞り込んで表示されるようになっています。

例えば「佐藤」と入れればこのように佐藤性の棋士が絞り込まれますし、

棋士データベースクイックサーチ

「群馬県」と入れれば群馬出身の棋士一覧が出てきます。

棋士データベースクイックサーチ

作り方

絞り込み検索の機能にはこちらの jQuery の quicksearch プラグインを使わせてもらいました。

前回の記事までで作った棋士データを使って table を組んでおき、quicksearch プラグインに table のどこを検索対象にするか指定してあげれば、後は自動的にリアルタイムに絞り込み検索をしてくれます。賢いですねー。

この記事で作ったコードはこちらに上げてありますので、ご自由にご覧ください。

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

副鼻腔炎
やっぱりだるかった。。約2年半ぶりの副鼻腔炎を発症。

先日の金曜日、朝から何だか体がだるいような感覚で一日我慢しながら仕事をこなしたも …

WordPressもくもく勉強会
10/30の「WordPressもくもく勉強会@群馬 #15」開催レポートです

WordPressもくもく勉強会@群馬 #15 : ATND 毎月最終木曜に開催 …

将棋
来年お正月の「上州将棋祭り2015」開催が発表されましたね

群馬で開催される超ビッグな将棋イベント「上州将棋祭り」、来年お正月の第5回の開催 …

自分がいなくてもうまくいく仕組み
「自分がいなくてもうまくいく仕組み」を読みました

ChatWork山本社長の新著「自分がいなくてもうまくいく仕組み」を読みました。 …

wordpress-logo-stacked-rgb
WordPressもくもく勉強会@群馬 #3 の開催レポート

WordPressもくもく勉強会@群馬 #3 : ATND すっかり遅くなってし …

確定申告
初めての確定申告(青色申告)でやったことをふりかえってみる

photo credit: kenteegardin via photopin …

エールクリエイティブ
太田市の コワーキングスペース 「エールクリエイティブ」に行ってきました

群馬県太田市にあるコワーキングスペース「エールクリエイティブ」に行ってきました。 …

都道府県別棋士数グラフ
将棋棋士データベースで遊ぶ(3)〜都道府県別棋士数をグラフで可視化〜

※この記事は「将棋 Advent Calendar 2016 – A …

ゆるキャラグランプリ
インターネット投票最終日まであと4日。ゆるキャラグランプリ制覇へぐんまちゃんラストスパート!

ゆるキャラグランプリ2014のインターネット投票は10月20日(月)まで、いよい …

gopher
高崎で開かれたGo言語の勉強会「Takasaki.go#1」に参加してきました

群馬県内ではおそらく初めてと思われる Go 言語の勉強会「Takasaki.go …