flexibleSearch.js - ページ送りに対応した高速 Ajax 検索が可能な jQuery プラグイン

flexibleSearch.js とは

flexibleSearch.js とは、あらかじめ作成しておいた JSON ファイルを検索することにより、柔軟で高速な Ajax 検索を実現する jQuery プラグインです。

ページ送りや検索項目の絞り込みなどにも対応しています。

また、ページ送りについては、hashchange.js を併せて使うことで、ブラウザの「戻る」「進む」の動作にも対応しています。

検索用 JSON の準備

flexibleSearch.js は、あらかじめ用意された JSON ファイルを読み込み、その内容を検索する仕組みです。

当プラグインで利用する JSON の形式は次のようになります。

{"item":[
    {
        "key1":"値1",
        "key2":"値2",
        "key3":"値3"
    },
     ...(略)...
    {
        "key1":"値1",
        "key2":"値2",
        "key3":"値3"
    }
]}

オブジェクトの最後の値の後にはカンマをいれないように気をつけてください。

Movable Type や WordPress などの CMS を利用して JSON を出力する方法は後日ブログ記事を書きます。

JSON の構文チェック

jQuery 1.4 から、JSON の解釈がそれまでのバージョンよりも厳密になっているようなので(たぶん)、JSON の構文が正しいかどうか、一度「JSLint, The JavaScript Code Quality Tool」などでチェックすることを強くお勧めします。

flexibleSearch.js のダウンロード

以下より最新版をダウンロードしてください。

ファイルをダウンロードして解凍し、flexibleSearch フォルダをサーバーにアップロードします。ここでは、僕のブログでの利用をサンプルとして説明しますので、flexibleSearch フォルダを次のようにアップロードします。

  • ドメインルート/blog
    • js
      • flexibleSearch
        • flexibleSearch.css
        • flexibleSearch.min.js
        • hashchange.js
        • loading.gif
        • search_data.js

ファイルの読み込み

次に、flexibleSearch フォルダ内のファイルと jQuery 本体を、次の順序で読み込みます。ここでは、jQuery 本体は Google から読み込んでいます。

<link rel="stylesheet" href="/blog/js/flexibleSearch/flexibleSearch.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/blog/js/flexibleSearch/hashchange.js"></script>
<script type="text/javascript" src="/blog/js/flexibleSearch/flexibleSearch.min.js"></script>

なお、flexibleSearch.css については、今後の当プラグインのバージョンアップ時の拡張性を考えて別ファイルにしてありますが、現在は1つの CSS ルールしか記述されていませんので、すでにサイトで使用している CSS ファイルに、flexibleSearch.css の内容をコピペした方が良いかも知れません。

ファイルの実行

さて、いよいよプラグインを実行します。

flexibleSearch.js では、検索ボックス(input:text)と検索ボタン(input:button)が自動で生成されます。したがって、検索ボックスと検索ボタンを入れるボックスだけ用意して、そのボックス(セレクタ)に対して実行すればOKです。

このブログでは、#search_content の中に検索ボックスを表示したいので、その場合は、先ほど flexibleSearch.js 等を読み込んだ位置より後ろに、次のようなコードを記述します。

$('#search_content').flexibleSearch({
    // オプション設定(下記参照)
});

この #search_content の部分は、ご自分の環境に合わせて適宜変更してください。ここで指定した要素の中に検索ボックスが表示されます。

ただし、この自動で生成される検索ボックスとボタンを利用しているとき、万が一、検索用 JSON の読み込みに失敗した場合には、ボタンをクリックしても何も起らないという状態に陥ってしまう可能性があります。

したがって、既存の CGI や PHP で動く検索ボックスとボタンがある場合は、下記のオプションの説明を参考に、それらに当プラグインの機能を適用させた方が良いかもしれません。このブログではそのようにしています。オプションの該当項目は、searchBoxCreate、searchTextId、searchSubmitId です。

オプション設定

さて、このプラグインを実行するには、いくつかのオプションを設定する必要があります。デフォルトのままで良いものは省略してOKです(以下のそれぞれの値がデフォルト値です)。

searchBoxCreate : true

falseに設定すると、検索ボックスと検索ボタンは生成されません。

searchTextId : "fs-search-keyword"(searchBoxCreate: false の場合必須)

searchBoxCreate を false にした場合は、flexibleSearch.js で利用する検索ボックス(input:text)の id 属性値を指定します。

searchSubmitId : "fs-search-submit"(searchBoxCreate: false の場合必須)

searchBoxCreate を false にした場合は、flexibleSearch.js で利用する検索ボタン(input:button)の id 属性値を指定します。

searchSubmitText : "Search"

自動で生成される検索ボタンのテキストを指定します。

closeBtnCreate : "false"

true にすると、検索結果一覧の一番下にその一覧を閉じるボタンが表示されます。

closeBtnText : "Close"

閉じるボタンのテキストを指定します。

closeBtnEffect : "hide" // hide, fadeOut, slideUp

閉じるボタンをクリックしたときのエフェクトを、hide, fadeOut, slideUpのいずれかで指定します。

resultTargetId : "fs-result-target"(必須)

検索結果を表示させるボックスの id 属性値を指定します。ここで指定した要素の中に、検索結果が表示されます。

resultBoxInsert : "prepend" // prepend or append

検索結果を表示する方法を指定します。

  • prepend : resultID で指定した要素に、元々ある内容は残したまま、その先頭に挿入します(推奨)。
  • append : resultID で指定した要素に、元々ある内容は残したまま、その最後に追加します。

resultEffect : "show" // show, fadeIn, slideDown

検索結果を表示するときのエフェクトを、show, fadeIn, slideDownのいずれかで指定します。

selectFields : null // 検索対象を絞り込む場合はオブジェクトを指定

検索対象を限定するためのセレクトボックス(select要素)が生成されます。例えば、検索対象の JSON が次のようだった場合、

{"item":[
    {
        "key1":"値1",
        "key2":"値2",
        "key3":"値3"
    },
     ...(略)...
    {
        "key1":"値1",
        "key2":"値2",
        "key3":"値3"
    }
]}

selectFields オプションには次のように指定します。

selectFields : {
    "key1":"key1の表示名(<option>【この部分】</option>)",
    "key2":"key2の表示名(<option>【この部分】</option>)",
    "key3":"key3の表示名(<option>【この部分】</option>)"
}

multiple : false

true にすると、上の selectFields オプションで生成した select 要素に multiple="multiple" を属性が付き、複数選択が可能になります。

refineFields : null // 検索対象を絞り込む場合はオブジェクトを指定

指定方法は selectFields オプションと全く同じです。selectFields オプションとの違いは、次のようになります。

selectFields オプション
select 要素を生成しユーザーに選択させる。つまり項目の絞り込みのみ提供する。
refineFields オプション
input type="hidden" 要素を生成する。これらの要素に任意の方法で値を持たせることで、項目の値による絞り込みが可能になり、より厳しく絞り込むことができる。詳細は後日ブログ記事を書きます。

loadingImgPath : "/flexibleSearch/loading.gif"(必須)

アップロードしたローディング中の画像のパスを表示します。ドメインルートからの絶対パスか、絶対URLで指定してください。

searchDataPath : "/flexibleSearch/search_data.js"(必須)

検索用 JSON ファイルのパスを指定します。ドメインルートからの絶対パスか、絶対URLで指定してください。

paginateCount : "10"

ページ送りする際の1ページ当たりの項目数を指定します。ページ送りが不要な場合は、ここに9999など大きな値を指定しておきます。

paginateSeparator : " | "

ページ送りナビゲーションの各ページ間の区切り文字を指定します。

cache : false

true を指定すると、search_data.js をキャッシュします。

以上です。もし不具合等がありましたらコメントいただけると嬉しいです。

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