プラグインですぐ実装できる！jQueryで検索機能を追加する方法【初心者向け】
プログラミング初心者向けに、jQueryで検索機能を追加する方法を解説しています。QuickSearchというプラグインを活用しているので、手軽に利用することができます。初心者の方でもすぐ利用できるので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryで検索機能を追加する方法を紹介します。
今回は、誰でも手軽に検索機能を実装できるようにプラグインを活用しているので、難しくなく進められるはずです。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
目次
検索機能を実装できるプラグイン
今回検索機能を実装する上で使うjQueryのプラグインは「QuickSearch」です。
URL：https://github.com/DeuxHuitHuit/quicksearch
以上よりダウンロードしてください。
このライブラリはjQueryのあとに読み込んでください。
このプラグインを使うことで、入力した文字列に応じてHTMLの要素である「table」「list」から絞り込むことができます。
以下で実際に使ってみましょう。
田島メンター!QuickSerachとは何でしょうか？
テーブルやリストのデータを検索できるようにしてくれるプラグインなんだ。
数が多いテーブルとかリストデータの中から該当の物を見つけてくれるんですか？
そうそう。該当の物以外を非表示にして消してくれたりするんだ。さっそく使ってみよう！
実際に使ってみよう
実際にソースコードを書いてみましょう。「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');
});
ブラウザで見るとテキスト入力欄があります。
例えば、「100」 と検索してみましょう。
すると、100点を取った項目のみ表示することができました。
JavaScriptの解説をすると、内部で指定しているのは、「QuickSearch」を適用する先です。
今回は、「id = “seach”」で指定しています。function()はready()の省略で、<body>が詠み終わったところでこのスクリプトが実行されます。
以上、検索機能を追加する方法について解説しました。
自力で実装しようとすると大変なので、便利なプラグインを活用して形にしていきましょう。
テーブルが検索できるようになってますねー。
ページの読み直しとかもないので、便利なんだ。
便利ですけど、テーブルやリストに検索しなければならないほど大量のデータを書くことってありますか？
jQueryとPHPなどを連帯して、データベースからテーブルに表示するデータを持ってくるなんてのも考えられるよ。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
