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

  関連記事

釣り
夏休みの子ども連れお出かけスポットに釣り堀をオススメする3つの理由

夏休みに子どもを連れてどこにでかけようか?そんなお悩みを持った方は多いんじゃない …

電王戦
第三回電王戦最終局「屋敷伸之九段 vs ponanza」の大盤解説会を観戦してきました

先日開かれた第三回電王戦の最終第5局。屋敷伸之九段 vs ponanza の大盤 …

徒競走
いざ本番!運動会に向けてうちの子が今年取り組んだかけっこ対策について

すっかり季節も秋めいて、あちこちで運動会が開かれるシーズンですね。 うちの長男は …

プログラミング
ウィンドウのスクロール位置を保持したままページ遷移する方法

ウィンドウのスクロール位置を保持したままページ遷移する方法を調べていまして、ざっ …

「嫌われる勇気」を読みました。

お正月、実家へ帰省した時に目について面白そうだから持ち帰った「嫌われる勇気」を先 …

四字熟語辞典
小学校低学年から楽しく読めて分かりやすい「小学生のまんが四字熟語辞典」

うちの子は暇さえあれば何かしら本を開いている本の虫で(近頃はマンガの割合がだいぶ …

子ども
ドラゴンと少年と親と子どもたち

子どもたち一緒にいられる時間ってとても貴重なんだなあ、と改めて感じたことを書いて …

将棋
第4回電王戦に向けて出場棋士予想ツイートをまとめてみました

先日、ドワンゴと日本将棋連盟から8月29日に「将棋電王戦に関する記者発表会」が開 …

電王戦
今週末は菅井五段対習甦の「将棋電王戦リベンジマッチ 激闘23時間」が楽しみですね!

「将棋電王戦リベンジマッチ 激闘23時間」菅井竜也五段 vs 習甦の対局が、いよ …

Gunma.web
Gunma.web #14 に参加してきました

群馬の Web 系勉強会の草分け的存在な Gunma.web、前々から参加したい …