rui live note

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

*

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

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

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

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

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

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

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

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

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

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

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

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

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

作り方

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

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

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

ad

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

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

  関連記事

俺の四川
ランチパスポート2店目。高崎市「俺の四川」の麻婆豆腐セット

ランチパスポートを使ったお得なワンコインランチ、2店目は高崎市内中央銀座通りにあ …

前橋初市
前橋初市まつりがおめでたくて楽しくてオススメな件

前橋に引っ越してきてから6年目になるわけですが、今まで一度も行ったことがなかった …

ITビジネスの原理
インターネットで自己実現を加速しよう!「ITビジネスの原理」を読んだ。

ITとありますが、特にインターネット界隈のビジネスの歴史や成功を納めた会社の仕組 …

桐生もくもく会
桐生で開かれたブログ・WordPressもくもく会に行ってきました

先日、ひまわりラボさんの主催により桐生で開かれた「ブログもくもく会/WordPr …

絵本
我が家で人気の探し絵本について(子育て 読み聞かせ Advent Calendar 2013 2日目)

※この記事は、子育て 読み聞かせ Advent Calendar 2013の二日 …

妖怪ウォッチ
今度はマクドナルドで妖怪ウォッチの2015年カレンダーが発売!11月6日までの予約特典も。

妖怪ウォッチカレンダー2015 | McDonald's マクドナルド …

WordPress
「WordPressもくもく勉強会@群馬 #1」という勉強会を開いてみます

7月25日(木)、「WordPressもくもく勉強会@群馬」というWordPre …

鶴サブレ
WordPressもくもく勉強会@群馬 #2 の開催レポートです

(写真は会に関係無いですが、@tsurumau さんの差し入れ「鶴サブレ」です。 …

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

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

小学校
小学校各学年を代表するキャラクターを息子と考えてみた結果

先日息子と会話していて、自分たちが知っている小学校各学年のキャラクターの話題にな …