jQuery Search Box 0.03 アップデート - 検索対象を選択可能に!もちろんカスタムフィールドもOK

昨夜公開したばかりの、かつ今朝アップデートしたばかりの「jQuery で実現する高速キーワード検索とタグ検索(Movable Type 版)- jQuery Search Box」なんですが、またまたアップデートしました。すいません、どうも公開してから再び燃えてくる性分のようで。。。

今回は、検索対象を一つに限定できる機能を追加しました。

検索対象を選択って?

例えば、検索対象の search_data.js が次のような構成だったとします。


{"item":[
    {
        "title":"hogehoge",
        "keyword":"hogehoge",
        "tag":"hogehoge",
        "catchphrase":"hogehoge,"
        "body":"hogehoge",
        "more":"hogehoge"
    },
    {
        ...
    }
]}

この場合、title だけ検索や keyword だけ検索というのができるようになります。もちろんカスタムフィールドにも対応しています。上の例で言えば、「catchphrase」というのがカスタムフィールドです。

limitFields オプションの指定

検索対象を絞り込むためのセレクトボックスは、limitFields オプションに連想配列を指定することで自動で生成されます。

連想配列は、次のようなルールで設定します。

{
    "search_data.jsで指定した各項目のキー":"その項目の名前"
}

例えば、先ほど例示した構成の search_data.js であれば、limitFields オプションは次のように指定します。

limitFields : {
    "title":"タイトル",
    "keyword":"キーワード",
    "catchphrase":"キャッチフレーズ,"
    "body":"本文",
    "more":"追記"
}

これにより、以下のようなソースのセレクトボックスが、jQuerySearchBox を適用させたセレクタ要素の最後に追加されます。

<select id="limit_fields">
    <option selected="selected" value="">すべての項目</option>
    <option value="title">タイトル</option>
    <option value="keyword">キーワード</option>
    <option value="catchphrase">キャッチフレーズ</option>
    <option value="body">本文</option>
    <option value="more">追記</option>
</select>

limitFields01.png

これで完成です。このセレクトボックスで選択した項目だけが検索対象になります。

ということで、以下の記事も更新しておきました。すいませんが、ダウンロードは以下からお願いいたします。

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