{ 2010.12.6 }

jquery.simplesearch.js のご紹介

    はてなブックマーク - jquery.simplesearch.js のご紹介
    このエントリーをはてなブックマークに追加

    はじめまして、同世代が次々と結婚していく現状にそろそろ焦りを感じ始めた島田です。
    (安元さんおめでとーございます!)

    Fusicでは主に、PHP, Javascript, サーバ構築・管理を担当しています。
    今後ともよろしくお願いします。

    早速ですが、今回は 自作 jQueryプラグイン の紹介をさせていただきます。

    内容

    このプラグインは、Firefoxの各種設定ページ(アドレスバーに about:config と入力した時に出てくるページ)のフィルタをイメージして作成しています。
    ※Ajax は使ってないです。

    デモ
    ※ デモのテキストボックスに『FW』と入力すると、Position が FW のリストだけが表示されます。

    行数の多いテーブルなどで、フィルタをかけて表示したい時などにご利用ください。
    デモでは、単純にHTMLのテーブルをフィルタリングしてますが、
    私はよく、環境変数や定数などを度忘れした時なんかに、print_a で表示してフィルタリングをかけたりしています。。

    使い方

    HTML:

    <!-- 検索用テキストボックス -->
    <p><input type="text" name="jquery.search" id="jquerysearch" value="" /></p>
    
    <hr />
    
    <!-- フィルタをかけるリスト -->
    <table id="seachtable">
      <thead>
        <tr>
          <th>No.</th>
          <th>Nationality.</th>
          <th>Position.</th>
          <th>Name.</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td class="test">スペイン</td>
          <td>GK</td>
          <td>ビクトール・バルデス</td>
        </tr>
        <tr>
          <td>2</td>
          <td>ブラジル</td>
          <td>DF</td>
          <td>ダニエウ・アウヴェス</td>
        </tr>
        <tr>
          <td>3</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>ジェラール・ピケ</td>
        </tr>
        <tr>
          <td>5</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>カルレス・プジョル</td>
        </tr>
        <tr>
          <td>6</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>シャビ</td>
        </tr>
        <tr>
          <td>7</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ダビド・ビジャ</td>
        </tr>
        <tr>
          <td>8</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>アンドレス・イニエスタ</td>
        </tr>
        <tr>
          <td>9</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ボージャン・クルキッチ</td>
        </tr>
        <tr>
          <td>10</td>
          <td>アルゼンチン</td>
          <td>FW</td>
          <td>リオネル・メッシ</td>
        </tr>
        <tr>
          <td>11</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ジェフレン・スアレス</td>
        </tr>
        <tr>
          <td>13</td>
          <td>スペイン</td>
          <td>GK</td>
          <td>ホセ・マヌエル・ピント</td>
        </tr>
        <tr>
          <td>14</td>
          <td>アルゼンチン</td>
          <td>MF</td>
          <td>ハビエル・マスチェラーノ</td>
        </tr>
        <tr>
          <td>15</td>
          <td>マリ</td>
          <td>MF</td>
          <td>セイドゥ・ケイタ</td>
        </tr>
        <tr>
          <td>16</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>セルヒオ・ブスケツ</td>
        </tr>
        <tr>
          <td>17</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ペドロ・ロドリゲス</td>
        </tr>
        <tr>
          <td>18</td>
          <td>アルゼンチン</td>
          <td>DF</td>
          <td>ガブリエル・ミリート</td>
        </tr>
        <tr>
          <td>19</td>
          <td>ブラジル</td>
          <td>DF</td>
          <td>マクスウェル</td>
        </tr>
        <tr>
          <td>21</td>
          <td>ブラジル</td>
          <td>DF</td>
          <td>アドリアーノ・コレイア</td>
        </tr>
        <tr>
          <td>22</td>
          <td>フランス</td>
          <td>DF</td>
          <td>エリック・アビダル</td>
        </tr>
        <tr>
          <td>26</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>アンドレウ・フォンタス</td>
        </tr>
        <tr>
          <td>27</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ノリート</td>
        </tr>
        <tr>
          <td>28</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>セルジ・ロベルト</td>
        </tr>
        <tr>
          <td>29</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ビクトール・バスケス</td>
        </tr>
        <tr>
          <td>30</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>ティアゴ・アルカンタラ</td>
        </tr>
        <tr>
          <td>31</td>
          <td>スペイン</td>
          <td>GK</td>
          <td>ルベン・ミーニョ</td>
        </tr>
        <tr>
          <td>32</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>マルク・バルトラ</td>
        </tr>
        <tr>
          <td>33</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>セルジ・ゴメス</td>
        </tr>
        <tr>
          <td>34</td>
          <td>メキシコ</td>
          <td>MF</td>
          <td>ジョナタン・ドス・サントス</td>
        </tr>
        <tr>
          <td>35</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>マルク・ムニエッサ</td>
        </tr>
        <tr>
          <td>36</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>マルティ・リベロラ</td>
        </tr>
        <tr>
          <td>37</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>オリオール・ロメウ</td>
        </tr>
        <tr>
          <td>38</td>
          <td>スペイン</td>
          <td>GK</td>
          <td>オイエル・オラサバル</td>
        </tr>
        <tr>
          <td>39</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ルベン・ロチーナ</td>
        </tr>
      </tbody>
    </table>

    Javascript:

    $(function(){
      $('#jquerysearch').simplesearch({
        // フィルタをかけた時、表示・非表示にするリスト
        lines: '#seachtable tbody tr',
        // 対象となる文字列が含まれるセレクタ
        //※nullの場合は、lines 全体の文字列を検索
        targets: 'td',
        // 最後の入力から interval秒 経過するとフィルタリングを開始します
        interval: 500
      });
    });
    

    DOMがロードされた時点(ready(fn))で、文字列・jQueryオブジェクトを変数に格納して、検索時にはその変数を参照するなどなるべくスムーズに動せるように実装しています。

    なお、ソースコードはここに置いてますので、ご自由にご利用ください。

    それでは、また次回お会いしましょう。
    さようなら。

    Comments are closed.