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

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

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

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