プラグインですぐ実装できる!jQueryで検索機能を追加する方法【初心者向け】

プログラミング初心者向けに、jQueryで検索機能を追加する方法を解説しています。QuickSearchというプラグインを活用しているので、手軽に利用することができます。初心者の方でもすぐ利用できるので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryで検索機能を追加する方法を紹介します。

今回は、誰でも手軽に検索機能を実装できるようにプラグインを活用しているので、難しくなく進められるはずです。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

目次

 

検索機能を実装できるプラグイン

今回検索機能を実装する上で使うjQueryのプラグインは「QuickSearch」です。

URL:https://github.com/DeuxHuitHuit/quicksearch

以上よりダウンロードしてください。

このライブラリはjQueryのあとに読み込んでください。

このプラグインを使うことで、入力した文字列に応じてHTMLの要素である「table」「list」から絞り込むことができます。

以下で実際に使ってみましょう。

 

大石ゆかり

田島メンター!QuickSerachとは何でしょうか?

田島悠介

テーブルやリストのデータを検索できるようにしてくれるプラグインなんだ。

大石ゆかり

数が多いテーブルとかリストデータの中から該当の物を見つけてくれるんですか?

田島悠介

そうそう。該当の物以外を非表示にして消してくれたりするんだ。さっそく使ってみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に使ってみよう

実際にソースコードを書いてみましょう。「jquery.quicksearch.js」というファイルを同じディレクトリに置くことでプラグインを使用しています。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="jquery.quicksearch.js" type="text/javascript"></script>
    <script src="sample.js" type="text/javascript"></script>
    <title>jQuery</title>
  </head>
  <body>
    <form action="#">
      <input type="text" name="search" value="" id="search" />
    </form>
    <table>
      <thead>
        <tr>
          <th>氏名</th>
          <th>教科</th>
          <th>点数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>阿良々木</td>
          <td>数学</td>
          <td>100</td>
        </tr>
        <tr>
          <td>戦場ヶ原</td>
          <td>英語</td>
          <td>100</td>
        </tr>
        <tr>
          <td>羽川</td>
          <td>国語</td>
          <td>100</td>
        </tr>
        <tr>
          <td>忍野</td>
          <td>化学</td>
          <td>60</td>
        </tr>
        <tr>
          <td>八九寺</td>
          <td>生活</td>
          <td>100</td>
        </tr>
        <tr>
          <td>神原</td>
          <td>保健体育</td>
          <td>90</td>
        </tr>
        <tr>
          <td>千石</td>
          <td>暦</td>
          <td>100</td>
        </tr>
        <tr>
          <td>貝木</td>
          <td>社会</td>
          <td>70</td>
        </tr>
        <tr>
          <td>斧乃木</td>
          <td>日本史</td>
          <td>50</td>
        </tr>
        <tr>
          <td>影縫</td>
          <td>数学</td>
          <td>70</td>
      </tr>
      </tbody>
    </table>
  </body>
</html>

JavaScript

$(function(){
  $('input#search').quicksearch('table tbody tr');
});

ブラウザで見るとテキスト入力欄があります。

スクリーンショット 2016-09-05 16.20.25

例えば、「100」 と検索してみましょう。

スクリーンショット 2016-09-05 16.20.14

すると、100点を取った項目のみ表示することができました。

 

JavaScriptの解説をすると、内部で指定しているのは、「QuickSearch」を適用する先です。

今回は、「id = “seach”」で指定しています。function()はready()の省略で、<body>が詠み終わったところでこのスクリプトが実行されます。

 

以上、検索機能を追加する方法について解説しました。

自力で実装しようとすると大変なので、便利なプラグインを活用して形にしていきましょう。

 

大石ゆかり

テーブルが検索できるようになってますねー。

田島悠介

ページの読み直しとかもないので、便利なんだ。

大石ゆかり

便利ですけど、テーブルやリストに検索しなければならないほど大量のデータを書くことってありますか?

田島悠介

jQueryとPHPなどを連帯して、データベースからテーブルに表示するデータを持ってくるなんてのも考えられるよ。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。