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

  関連記事

将棋
将棋ウォーズでようやく三級→二級に昇級したのでこの間を少し振り返ってみる

下手の横好きで最近熱を上げている将棋ウォーズですが、昨日ようやく二級に昇級しまし …

妖怪メダル第4章
今度は妖怪メダル第4章が10月18日発売。我が家の購入予定はこんな感じ。

というわけで、妖怪メダルの新作第4章が10月18日(土)に発売されるそうです。何 …

妖怪
妖怪ウォッチ好きの子どもたちもきっと気に入る!妖怪やお化けが沢山出てくるオススメ絵本5選

子ども界を席巻している妖怪ウォッチ。そりゃ面白いですからゲームをしたり、アニメや …

将棋
将棋ウォーズの時間切れ負け率が50%もあったので対策を考えてみた

ちょっと早口の人が相手だと話がなかなか頭に入ってこなかったり、何かを説明しようと …

オンライン学習部
9月18日にオンライン学習部という勉強会を開きます

9月18日(水)にオンライン学習部 #0 という勉強会を開きます。 オンライン学 …

Git
とりあえずGit使ってみたい!「Gitポケットリファレンス」はそんな人に向いてる一冊でした。

今さらながら、最近ようやくGitを使い始めている今日この頃です。 少し前までは、 …

将棋駒
将棋駒画像が無料ダウンロードできる素材サイトまとめ

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

電王戦
コンピュータ将棋の歴史を紐解くのに「ルポ 電王戦」はおすすめの一冊

話題の新書「ルポ 電王戦―人間 vs. コンピュータの真実」を読みました。 タイ …

OSC群馬
OSC群馬に「WordPressもくもく勉強会@群馬」を出展してきます

5月14日(土)、高崎駅西口の LABI1 で「オープンソースカンファレンス20 …

電王戦タッグマッチ
電王戦タッグマッチ 2014 FinalRound 観に行ってきました

10月12日に開かれた「電王戦タッグマッチ2014 FinalRound」の観覧 …