あらかじめ用意したJSONファイルを検索することにより超高速JavaScript検索を実現するjQueryプラグインです。 JSONファイルさえ用意できればどのようなサイトにでも導入することができます。
CMSの種類、静的なHTMLサイト、動的なPHPサイト、スマホサイトなど、様々なシーンでご利用ください。
なお、Movable Type 6 で使う場合は、Data API にパラメータを渡して検索することもできます。検索は Data API で行い、ページングは flexibleSearch.js の機能を使うという方法が可能になります。
前バージョン（v1系）はURLにハッシュを付け、その検索条件をcookieに保存するなど少し特殊な方法でしたが、本バージョン（v2系）からは通常の検索と同様にURLにパラメータを付けてGETリクエストするような方法で検索します。
したがって、前バージョンではやりにくかった下記の運用が可能です。
- search.html など検索結果表示ページを用意する通常検索
- 検索結果ページをブックマークさせる
- 特定の検索条件のページにリンクを貼る
サーバー上のドメインルートに下記のファイルをアップロードします。アップロード先を変更する場合は、適宜置き換えてください。
- /flexibleSearch/flexibleSearch.js
- /flexibleSearch/flexibleSearch-config.js
- /flexibleSearch/mustache.js
- /flexibleSearch/loading.gif
mustache.jsはHTMLを簡単に書き出せるJavaScript用のテンプレートエンジンです。
検索結果を表示するHTMLページを用意し、jQuery、mustache.js、flexibleSearch.js、flexibleSearch-config.jsの順番で読み込みます。
ここでは以下の様に、サイトのトップページとしてindex.htmlを、検索結果表示ページとしてsearch.htmlを用意します。
なお、flexibleSearch-config.jsはflexibleSearchを実行するための設定を書くファイルです。flexibleSearch.jsより後ろに位置していれば、scriptタグでHTMLファイルに直接書いても、他のJavaScriptファイルに書いても構いません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flexibleSearch.js</title>
</head>
<body>
<h1>flexibleSearch.js</h1>
<h2>あらかじめ用意したJSONファイルを検索することにより超高速JavaScript検索を実現するjQueryプラグインです。</h2>
<div id="search"></div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/flexibleSearch/mustache.js"></script>
<script src="/flexibleSearch/flexibleSearch.js"></script>
<script src="/flexibleSearch/flexibleSearch-config.js"></script>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flexibleSearch.js</title>
</head>
<body>
<h1>検索結果</h1>
<div id="search"></div>
<div id="fs-result"></div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/flexibleSearch/mustache.js"></script>
<script src="/flexibleSearch/flexibleSearch.js"></script>
<script src="/flexibleSearch/flexibleSearch-config.js"></script>
</body>
</html>
検索用のJSONファイルを用意します。JSONの書式は以下の通りです。
{"items": [
{"title": "タイトル", "contents": "コンテンツ", ...(省略)... },
{"title": "タイトル", "contents": "コンテンツ", ...(省略)... }
]}
ルートのitemsは必須です。その値に、各記事ごとのオブジェクトが入った配列並べるスタイルになります。
なお、Movable Typeで記事とウェブページに関するJSONを書き出すときのテンプレートは以下の様になります。カスタムフィールド等も検索対象にする場合は適宜加えてください。
<mt:Unless name="compress" regex_replace="/^\s*\n/gm","">
<mt:SetVar name="items">
<mt:Entries include_blogs="all" lastn="0">
<mt:SetVarBlock name="item{title}"><mt:EntryTitle></mt:SetVarBlock>
<mt:SetVarBlock name="item{url}"><mt:EntryPermalink></mt:SetVarBlock>
<mt:SetVarBlock name="item{body}"><mt:EntryBody remove_html="1" regex_replace="/\n|\t| | /g",""></mt:SetVarBlock>
<mt:SetVarBlock name="item{more}"><mt:EntryMore remove_html="1" regex_replace="/\n|\t| | /g",""></mt:SetVarBlock>
<mt:SetVarBlock name="item{tag}">,<mt:EntryTags glue=","><mt:TagName regex_replace="/ | /g","%20"></mt:EntryTags>,</mt:SetVarBlock>
<mt:SetVarBlock name="item{category}"><mt:EntryCategories glue=","><mt:CategoryLabel></mt:EntryCategories></mt:SetVarBlock>
<mt:SetVarBlock name="items" function="push"><mt:var name="item" to_json="1"></mt:SetVarBlock>
</mt:Entries>
<mt:Pages include_blogs="all" lastn="0">
<mt:SetVarBlock name="item{title}"><mt:PageTitle></mt:SetVarBlock>
<mt:SetVarBlock name="item{url}"><mt:PagePermalink></mt:SetVarBlock>
<mt:SetVarBlock name="item{body}"><mt:PageBody remove_html="1" regex_replace="/\n|\t| | /g",""></mt:SetVarBlock>
<mt:SetVarBlock name="item{more}"><mt:PageMore remove_html="1" regex_replace="/\n|\t| | ",""></mt:SetVarBlock>
<mt:SetVarBlock name="item{tag}">,<mt:PageTags glue=","><mt:TagName regex_replace="/ | /g","%20"></mt:PageTags>,</mt:SetVarBlock>
<mt:SetVarBlock name="item{folder}"><mt:PageFolder><mt:FolderLabel></mt:PageFolder></mt:SetVarBlock>
<mt:SetVarBlock name="items" function="push"><mt:var name="item" to_json="1"></mt:SetVarBlock>
</mt:Pages>
{"items":[
<mt:Loop name="items" glue=","><mt:Var name="__value__"></mt:Loop>
]}
</mt:Unless>
検索対象とするブログを特定する場合は mt:Entries タグや mt:Pages タグの include_blogs モディファイアを調整してください（ include_blogs ）。
flexibleSearch-config.jsにオプション等を記述してflexibleSearchを実行します。flexibleSearchはform要素を包含するdiv等のブロック要素に適用します。
必須のオプションはケースによって異なりますが、searchDataPath、searchFormAction、loadingImgPathは指定しておくと良いでしょう。
各オプションの説明は後述します。
jQuery(function($) {
$('#search').flexibleSearch({
searchDataPath: "/flexibleSearch/search.json",
searchFormAction: "/flexibleSearch/search.html",
loadingImgPath: "/flexibleSearch/loading.gif",
dummy: null
});
});
flexibleSearch-config.jsに書く内容は以下のとおりです。flexibleSearch-config.jsには使用できるオプションがコメントアウトされているので、必要に応じてコメントを外して設定を変更してください。
dummy: null は不要ですが、最後のカンマを入れたり入れなかったり変更するのが面倒な場合は最終行に入れておくと良いかもしれません :-)
設定できるオプションは後述します。
検索結果の並び順は、デフォルトの状態だとJSONの並び順に準拠します。
この並び順をsortBy、sortOrder、sortTypeの3つのURLパラメータを使って並べ替えることができます。この機能はv2.2.0で追加されました。
並び替えの基準となるキーを指定します。並べ替える場合は必須です。
並び順をascend（昇順）またはdescend（降順）で指定します。初期値はdescendです。
数値として並び変える場合はnumericを、文字列として並び変える場合はstringを指定します。初期値はstringです。
指定出来るオプションは以下の通りです。詳細は後述します。
なお、下記の説明に出てくる「Data API」とは、Movable Type 6 から実装された Data API のことを指します。Movable Type 以外で flexibleSearch.js を利用する場合は読み飛ばしていただいて構いません。
| オプション名 | 設定値 | 初期値 | 説明 |
|---|---|---|---|
| limit | Number | null | limit オプションを指定すると URL の limit パラメータは無視され、ここで指定した値が常に優先されます。この limit オプションも URL パラメータの limit パラメータもどちらも指定がない場合は 10 がセットされた状態となります。(Add: v2.2.0) |
| searchDataPath | String Object |
"/flexibleSearch/search.json" | flexibleSearchで検索対象とするJSONファイルのパスを指定します。文字列で１つ指定する方法と、オブジェクトで複数指定する方法があります。 |
| searchDataPathPreload | String Array Object |
"/flexibleSearch/search.json" | 検索実行ページ以外で、検索対象とするJSONファイルをあらかじめ読み込んでおきキャッシュすることができます。文字列で１つ指定する方法と、配列またはオブジェクトで複数指定する方法があります。 |
| dataApiDataIds | String | null | MTのData APIを利用するdataIdを指定します。複数ある場合はカンマ区切りで指定します。dataIdとは、searchDataPathオプションをオブジェクトで指定した場合のプロパティ名のことを指します。 |
| dataApiParams | Object | null | Data APIを利用する場合に、検索フォームとは別にエンドポイントに渡すパラメータを設定できます。 |
| cache | Boolean | true | JSONファイルをキャッシュするかどうかを指定します。 |
| searchFormCreation | Boolean | true | 検索フォームをJavaScriptで書き出すかどうかを設定します。ここでfalesを設定すれば、HTMLに書かれた静的なフォームを利用することができます。ただし、必須のname項目があります。 |
| searchFormHTML | String | null | JavaScriptで書き出す検索フォームをHTML文字列で設定する場合に使用します。 |
| searchFormAction | String | (空文字) | form要素のaction属性を指定します。検索結果ページを用意する場合は必ず指定してください。 |
| searchFormInputType | String | "search" | form要素のキーワード入力欄のtype属性を指定します。 |
| searchFormInputPlaceholder | String | "Search words" | form要素のキーワード入力欄に入れるplaceholder属性を指定します。 |
| searchFormSubmitBtnText | String | "Search" | form要素の検索実行ボタンのテキストを指定します。 |
| advancedFormObj | String | null | advancedFormObjオプションにオブジェクトを設定することでキーワード入力欄以外のフォーム要素を簡単に作成できます。 |
| advancedSearchCond | String | "OR" | searchパラメータ以外の検索項目の検索条件を"OR"検索か"AND"検索か指定します。 |
| loadingImgPath | String | "/flexibleSearch/loading.gif" | ローディング画像のパスを指定します。 |
| loadingImgHTML | String | null | ローディング画像を直接HTMLで指定することができます。このオプションを指定した場合はloadingImgPathオプションの設定は無視されます。 |
| resultBlockId | String | "fs-result" | 検索結果やローディング画像入れるブロック要素のIDを指定します。 |
| resultItemTmpl | String | null | 検索結果を表示するMustacheテンプレートです。 |
| resultMsgId | String | null | 検索結果のメッセージを表示する要素のidを指定します。 (Add: v2.2.0) |
| resultMsgClassName | String | "fs-result-msg" | 検索結果のメッセージを表示する要素のclass名を指定します。 (Add: v2.2.0) |
| resultMsgTmpl | String | null | 検索結果のメッセージを表示するMustacheテンプレートです。 |
| resultMsgInsertMethods | Array | null | 検索結果のメッセージを表示する要素のセレクタと挿入方法を指定します。 (Add: v2.2.0) |
| resultMetaTitleTmpl | String | null | 検索結果ページのmeta title用のMustacheテンプレートです。 (Add: v2.2.0) |
| paginateId | String | null | 検索結果のページ送りを表示するブロックのIDを指定します。 |
| paginateClassName | String | "fs-paginate" | 検索結果のページ送りを表示するブロックのclass名を指定します。 (Add: v2.2.0) |
| paginateTmpl | String | null | 検索結果が複数ページにわたる場合のページ送りを表示するMustacheテンプレートです。 |
| paginateCount | Number | 10 | 1ページに表示する件数をしていします。この値がlimitパラメータになります。 |
| hidePageNumber | Boolean | false | trueを設定するとページ分割のページ番号を非表示にします。 (Add: v2.2.0) |
| showTurnPage | Boolean | true | falseを設定するとページ分割の「Prev」「Next」のページ送りを非表示にします。 (Add: v2.2.0) |
| prevPageText | String | "Prev" | ページ分割の前のページへ送るリンクのテキストを指定します。 (Add: v2.2.0) |
| nextPageText | String | "Next" | ページ分割の次のページへ送るリンクのテキストを指定します。 (Add: v2.2.0) |
| maxPageCount | Number | 10 | ページ分割時に表示する最大ページ数を指定します。例えば、maxPageCountオプションを10に設定して、検索結果が全部で30ページになったとすると、そのうちの、現在のページを中心にして最大何ページ表示するか、という意味です。 (Add: v2.2.0) |
| paginateInsertMethods | Array | null | ページ分割ナビゲーションを表示する要素のセレクタと挿入方法を指定します。 (Add: v2.2.0) |
| initialParameter | String | null | flexibleSearch を適用しているページにパラメータが無い場合でも、flexibleSearch を動かすためのパラメータを設定することができます。 (Add: v2.2.3) |
| resultMetaTitleRewrite | Boolean | true | メタタイトルの書き換えを無効ににできます。 (Add: v2.2.3) |
| submitAction | Function | function (paramArray) { return paramArray; } | フォームがsubmitされ、ページが遷移する前に呼ばれる関数を設定できます。この関数にはシリアライズされたパラメータの配列paramArrayが渡されます。 |
| ajaxError | Function | function (jqXHR, textStatus, errorThrown) { window.alert(textStatus); } | jQuery.ajaxでエラーが起きたときに呼ばれる関数を設定できます。 |
| customSearch | Function | null | 独自の検索ロジックを追加することができます。 (Add: v2.2.0) |
| customSort | Function | null | sortBy パラメータとは別に複雑なソート処理などを加えることができます。(Add: v2.2.3) |
| modifyResultJSON | Function | null | 検索結果をHTMLに出力する直前にJSONを加工することができます。 (Add: v2.2.0) |
| modifyResultMsgHTML | Function | null | 検索結果メッセージのHTMLを加工することができます。 |
| modifyResultItemHTML | Function | null | 検索結果一覧のHTMLを加工することができます。 |
| modifyPaginateHTML | Function | null | ページ分割のHTMLを加工することができます。 |
| resultComplete | Function | null | 検索結果をページのDOMに挿入した後に呼ばれる関数を設定します。 |
| excludeParams | String | null | パラメータのうち検索から除外する項目をカンマ区切りで指定します。 |
| excludeSearchParams | String | null | JSON の項目のうちキーワード検索の対象から除外する項目をカンマ区切りで指定します。 |
limitオプションを指定するとURLのlimitパラメータは無視され、ここで指定した値が常に優先されます。このオプションはv2.2.0で追加されました。
なお、この limit オプションと URL パラメータの limit パラメータのどちらも指定がない場合は limit は 10 がセットされた状態となります。
searchFormCreationオプションがtrueのときに書き出されるフォームのlimit値、つまりlimitパラメータの値は paginateCount で指定してください。
設定例
limit: 20,
flexibleSearchで検索対象とするJSONファイルのパスを指定します。文字列で１つ指定する方法と、オブジェクトで複数指定する方法があります。
設定例
loadingImgPath: "/flexibleSearch/loading.gif",
または
searchDataPath: {
static: "/flexibleSearch/search_data.js",
entries: "/mt/mt-data-api.cgi/v1/sites/1/entries"
},
searchDataPathオプションをオブジェクトで指定した場合は、どのJSONを検索対象とするのかをdataIdパラメータで指定します。
例えば、上記の例で言えば、下記のようなラジオボタンを設置して検索対象を切り替える方法があります。
<p>
<label><input type="radio" name="dataId" value="static">Search static</label>
<label><input type="radio" name="dataId" value="entries">Search entries</label>
</p>
例えば検索カテゴリを必ず選択させるといった検索方法の場合、カテゴリごとにJSONファイルを用意して、dataIdパラメータで検索対象のJSONを切り替えれば、1つのJSONファイルのファイルサイズを減らすことができます。
検索実行ページ以外で、検索対象とするJSONファイルをあらかじめ読み込んでおきキャッシュすることができます。文字列で１つ指定する方法と、配列またはオブジェクトで複数指定する方法があります。
設定例
loadingImgPath: "/flexibleSearch/loading.gif",
または
searchDataPath: [
"/flexibleSearch/search_data.js",
"/mt/mt-data-api.cgi/v1/sites/1/entries"
],
または
searchDataPath: {
static: "/flexibleSearch/search_data.js",
entries: "/mt/mt-data-api.cgi/v1/sites/1/entries"
},
MTのData APIを利用するdataIdを指定します。複数ある場合はカンマ区切りで指定します。dataIdとは、searchDataPathオプションをオブジェクトで指定した場合のプロパティ名のことを指します。
設定例
dataApiDataIds: "entries,categories",
Data APIを利用する場合に、検索フォームとは別にエンドポイントに渡すパラメータを設定できます。
設定例
dataApiParams: {
fields: "title,keywords",
searchFields: "title,body,keywords"
},
JSONファイルをキャッシュするかどうかを指定します。
設定例
cache: false,
検索フォームをJavaScriptで書き出すかどうかを設定します。ここでfalesを設定すれば、HTMLに書かれた静的なフォームを利用することができます。ただし、以下のname値を持つ要素は必須です。
- search
- offset
- limit（limitオプションを指定した場合は不要）
設定例
searchFormCreation: false,
JavaScriptで書き出す検索フォームをHTML文字列で設定する場合に使用します。
設定例
searchFormHTML: [
'<form action="/search.html" method="GET">',
'<input type="hidden" name="offset" value="0">',
'<input type="hidden" name="limit" value="10">',
'<input type="text" name="search" value="">',
'<input type="radio" name="category" value="cat1">',
'<input type="radio" name="category" value="cat2">',
'<input type="submit" value="Search">',
'</form>'
].join(""),
form要素のaction属性を指定します。検索結果ページを用意する場合は必ず指定してください。
設定例
searchFormAction: "search.html",
form要素のキーワード入力欄のtype属性を指定します。
設定例
searchFormInputType: "text",
form要素のキーワード入力欄に入れるplaceholder属性を指定します。
設定例
searchFormInputPlaceholder: "キーワードを入力",
form要素の検索実行ボタンのテキストを指定します。
設定例
searchFormSubmitBtnText: "検索",
searchFormCreationオプションがtrueのとき、advancedFormObjオプションにオブジェクトを設定することでキーワード入力欄以外のフォーム要素を作成できます。
このオプションでは以下の要素を書き出すことができます。
- input:hidden
- input:text
- input:checkbox
- input:radio
- select
基本的な設定方法は以下の書式になります。
advancedFormObj: {
要素タイプ: [
{属性名: "属性値", 属性名: "属性値" ... },
...（いくつでも設定できます）
]
}
属性値を空にするか、属性名の指定をしないものは、その属性自体が書き出されなくなります。
詳細は下記の個別項目を参照してください。なお、「HTML出力例」は実際には改行なしの1行になります。
input:hidden要素
設定例
advancedFormObj: {
hidden: [
{id: "id値", name: "name値", value: "value値"},
...（いくつでも設定できます）
]
}
HTML出力例
<div class="fs-advanced-hidden" style="display:none;">
<input type="hidden" id="id値" name="name値" value="value値">
</div>
設定例
advancedFormObj: {
text: [
{id: "id値", name: "name値", value: "value値", placeholder: "placeholder値", label: "label値"},
{id: "id値", name: "name値", value: "value値", placeholder: "", label: ""},
...（いくつでも設定できます）
]
}
HTML出力例
<div class="fs-advanced-text">
<label id="id値-label" for="name値" class="fs-text fs-name値">
<input id="id値" type="text" name="name値" value="value値" placeholder="placeholder値">
label値
</label>
<input id="id値" type="text" name="name値" value="value値">
</div>
設定例
advancedFormObj: {
checkbox: [
{id: "id値", name: "name値", value: "value値", label: "label値"},
...（いくつでも設定できます）
]
}
HTML出力例
<div class="fs-advanced-checkbox">
<label id="id値-label" for="name値" class="fs-checkbox fs-name値">
<input type="checkbox" id="id値" name="name値" value="value値">
label値
</label>
</div>
設定例
advancedFormObj: {
radio: [
{id: "id値", name: "name値", value: "value値", label: "label値"},
...（いくつでも設定できます）
]
}
HTML出力例
<div class="fs-advanced-radio">
<label id="id値-label" for="name値" class="fs-radio fs-name値">
<input type="radio" id="id値" name="name値" value="value値">
label値
</label>
</div>
設定例
advancedFormObj: {
select: [
{id: "id値", name: "name値", size: "", multiple: "", option: [
{label: "選択してください", value: ""},
{label: "opt_label1", value: "opt_value1"},
{label: "opt_label2", value: "opt_value2"},
{label: "opt_label3", value: "opt_value3"}
]},
...（いくつでも設定できます）
]
}
HTML出力例
<div class="fs-advanced-select">
<select id="id値" for="name値" class="fs-select fs-name値">
<option value="">選択してください</option>
<option value="opt_value1">opt_label1</option>
<option value="opt_value2">opt_label2</option>
<option value="opt_value3">opt_label3</option>
</select>
</div>
advancedFormObj全体の設定例
advancedFormObj: {
hidden: [
{id: "id値", name: "name値1", value: "value値"}
],
text: [
{id: "id値1", name: "name値2", value: "value値1", placeholder: "placeholder値1", label: "label値1"},
{id: "id値2", name: "name値3", value: "value値2", placeholder: "placeholder値2", label: "label値2"}
],
checkbox: [
{id: "id値1", name: "name値4", value: "value値1", label: "label値1"},
{id: "id値2", name: "name値5", value: "value値2", label: "label値2"}
],
radio: [
{id: "id値1", name: "name値6", value: "value値1", label: "label値1"},
{id: "id値2", name: "name値6", value: "value値2", label: "label値2"}
],
select: [
{id: "id値1", name: "name値7", size: "", multiple: "", option: [
{label: "選択してください", value: ""},
{label: "opt_label1", value: "opt_value1"},
{label: "opt_label2", value: "opt_value2"},
{label: "opt_label3", value: "opt_value3"}
]},
{id: "id値2", name: "name値8", size: "3", multiple: "multiple", option: [
{label: "opt_label1", value: "opt_value1"},
{label: "opt_label2", value: "opt_value2"},
{label: "opt_label3", value: "opt_value3"}
]}
]
},
searchパラメータ以外の検索項目の検索条件を"OR"検索か"AND"検索か指定します。
設定例
advancedSearchCond: "AND",
ローディング画像のパスを指定します。
設定例
loadingImgPath: "/loading.gif",
loadingImgPathを指定すると、自動的に次のようなHTMLが検索結果表示ブロックの中に書き出されます。
なお、検索結果表示ブロックの中身はappendやprependではなくinnerHTMLでまるごと書き換わるので注意してください。
<span class="fs-loading"></span>
このHTMLを変更する場合は、次のloadingImgHTMLオプションを指定してください。
ローディング画像を直接HTMLで指定することができます。このオプションを指定した場合はloadingImgPathオプションの設定は無視されます。
設定例
loadingImgHTML: '<img src="loading.gif" alt="読み込み中">',
検索結果やローディング画像入れるブロック要素のIDを指定します。
設定例
resultBlockId: "contents-inner",
検索結果を表示するMustacheテンプレートです。このオプションを指定しない場合は、次のテンプレートが使用されます。
<div id="fs-result-items">
<ul>
{{#items}}
<li>{{&title}}</li>
{{/items}}
</ul>
</div>
{{#items}}〜{{/items}}で囲まれている部分が検索結果件の数だけループし、その中の{{項目名}}の部分はitemsのプロパティ名を指定します。
Mustacheテンプレートの書き方は janl/mustache.js を参照してください。
設定例
resultItemTmpl: [
'<div id="fs-result-items">',
'<ul>',
'{{#items}}',
'<li><a href="{{permalink}}">{{&title}}</a></li>',
'{{/items}}',
'</ul>',
'</div>'
].join(""),
検索結果のメッセージをデフォルトのテンプレートで利用する場合のdiv要素のid名を指定します。このオプションはv2.2.0で追加されました。
もしそれ以前のバージョンのデフォルトテンプレートと揃えたい場合は、このオプションに fs-result-msg を指定してください。
設定例
resultMsgId: "fs-result-msg",
検索結果のメッセージをデフォルトのテンプレートで利用する場合のdiv要素のclass名を指定します。このオプションはv2.2.0で追加されました。
設定例
resultMsgClassName: "fs-result-msg",
検索結果の上部に表示するメッセージのMustacheテンプレートです。このオプションを指定しない場合は、次のテンプレートが使用されます。
<div{{#id}} id="{{id}}"{{/id}}{{#classname}} class="{{classname}}"{{/classname}}>
<p>
{{#keywords}}「{{keywords}}」が {{/keywords}}
{{#count}}{{count}} 件見つかりました。{{/count}}
{{^count}}見つかりませんでした。{{/count}}
{{#count}}（{{lastPage}} ページ中 {{currentPage}} ページ目を表示）{{/count}}
</p>
</div>
{{項目名}}の部分は適宜該当する項目に置き換わりますので、resultMsgTmplオプションを指定する場合は、上記を参考に{{項目名}}を入れてください。
設定例
resultMsgTmpl: [
'<div id="fs-result-msg">',
'<p>{{#keywords}}「{{keywords}}」が {{/keywords}}{{count}} 件見つかりました。',
'（{{firstPage}}〜{{lastPage}} ページ中 {{currentPage}} ページ目を表示）</p>',
'</div>'
].join(""),
Mustacheテンプレートの書き方はjanl/mustache.jsを参照してください。
検索結果のメッセージを表示する場所を指定します。このオプションはv2.2.0で追加されました。
このオプションを指定しない場合は、検索結果一覧の上部にメッセージが表示されます。
このオプションでは、下記の設定例のようにselecterとmethodの2つのキーを持つオブジェクトで指定します。methodに指定出来るのは、jQueryのappend、prependなど、DOMに挿入したりHTMLを書き換えたりするメソッドです。
下記のようにページの上部と下部など、異なるセレクタで複数箇所に挿入することもできます。
設定例
resultMsgInsertMethods: [
{
"selector": "#page-title",
"method": "html"
},
{
"selector": "div.search-message",
"method": "append"
}
],
検索結果ページのmeta title用のMustacheテンプレートです。このオプションを指定しない場合は下記のテンプレートが使用されます（実際には1行になります）。このオプションはv2.2.0で追加されました。
{{#keywordArray}}{{.}} {{/keywordArray}}
{{#count}} {{count}}件{{/count}}
{{#count}} {{currentPage}}/{{lastPage}}{{/count}}
{{#metaTitle}} | {{metaTitle}}{{/metaTitle}}
このテンプレートで利用している {{#keywordArray}}{{.}} {{/keywordArray}} については、
キーワードが複数のときは {{.}} 部分にキーワードが入り、 {{#keywordArray}} と {{/keywordArray}} の内部がキーワード数分繰り返されます。
また {{#keywords}}{{keywords}}{{/keywords}} とすると、キーワードが複数のときは , でキーワードが区切られたテキストになります。
設定例
resultMetaTitleTmpl: "{{#keywordArray}}{{.}} {{/keywordArray}}の検索結果",
検索結果のページ送りを表示するブロックのIDを指定します。
設定例
paginateId: "paginate",
検索結果のページ送りを表示するブロックのclass名を指定します。このオプションはv2.2.0で追加されました。
設定例
paginateClassName: "fs-paginate",
検索結果が複数ページにわたる場合のページ送りを表示するMustacheテンプレートです。このオプションを指定しない場合は、次のテンプレートが使用されます。
<div{{#id}} id="{{id}}"{{/id}}{{#classname}} class="{{classname}}"{{/classname}}>
<ul>
{{#showTurnPage}}
{{#exceptFirst}}
<li class="fs-prev"><span><a class="fs-prev-link fs-turn-page-link" href="#" title="{{prevPageText}}">{{prevPageText}}</a></span></li>
{{/exceptFirst}}
{{/showTurnPage}}
{{#page}}
{{#checkRange}}
<li class="{{current}}"{{#hidePageNumber}} style="display:none;"{{/hidePageNumber}}><span><a class="fs-page-link {{currentLink}}" href="#" title="{{pageNumber}}">{{pageNumber}}</a></span></li>
{{/checkRange}}
{{/page}}
{{#showTurnPage}}
{{#exceptLast}}
<li class="fs-next"><span><a class="fs-next-link fs-turn-page-link" href="#" title="{{nextPageText}}">{{nextPageText}}</a></span></li>
{{/exceptLast}}
{{/showTurnPage}}
</ul>
</div>
{{#page}}〜{{/page}}で囲まれている内部がページ数分ループします。{{current}}はカレントページの時にfs-currentが出力されます。{{pageNumber}}がページ番号です。paginateHTMLオプションでHTMLを指定する場合は、上記HTMLと同様に{{項目名}}の各項目を入れてください。
テンプレートの書き方はjanl/mustache.jsを参照してください。
設定例
paginateTmpl: [
'<div id="fs-paginate">',
'<ul>',
'{{#page}}',
'<li{{¤t}}><a href="#" title="{{.}}">{{.}}</a></li>',
'{{/page}}',
'</ul>',
'</div>'
].join(""),
1ページに表示する件数をしていします。この値がlimitパラメータになります。
前述した limit オプションに値を設定した場合は、このpaginateCountオプションは無視されます。
設定例
paginateCount: 20,
trueを設定するとページ分割のページ番号を非表示にします。このオプションはv2.2.0で追加されました。
設定例
hidePageNumber: true,
falseを設定するとページ分割の「前へ」「次へ」のページ送りを非表示にします。このオプションはv2.2.0で追加されました。
設定例
showTurnPage: false,
ページ分割の前のページへ送るリンクのテキストを指定します。このオプションはv2.2.0で追加されました。
設定例
prevPageText: "前のページへ",
ページ分割の次のページへ送るリンクのテキストを指定します。このオプションはv2.2.0で追加されました。
設定例
nextPageText: "Next",
ページ分割時に表示する最大ページ数を指定します。このオプションはv2.2.0で追加されました。
例えば、maxPageCountオプションを10に設定して、検索結果が全部で30ページになったとすると、そのうちの、現在のページを中心にして最大何ページ表示するか、という意味です。
設定例
maxPageCount: 5,
ページ分割ナビゲーションを表示する要素のセレクタと挿入方法を指定します。このオプションはv2.2.0で追加されました。
このオプションを指定しない場合は、検索結果一覧の下部にナビゲーションが表示されます。
このオプションでは、下記の設定例のようにselecterとmethodの2つのキーを持つオブジェクトで指定します。methodに指定出来るのは、jQueryのappend、prependなど、DOMに挿入したりHTMLを書き換えたりするメソッドです。
下記のようにページの上部と下部など、異なるセレクタで複数箇所に挿入することもできます。
設定例
paginateInsertMethods: [
{
"selector": "#content-header",
"method": "append"
},
{
"selector": "div.paginate",
"method": "html"
}
],
flexibleSearch を適用しているページにパラメータが無い場合でも、flexibleSearch を動かすためのパラメータを設定することができます。
例えば、通常は search.html のようにパラメータが付いていないと flexibleSearch.js は動きませんが、下記のように initialParameter オプションを設定すると、 search.html は search.html?limit=10&offset=0 にアクセスしているのと同様に flexibleSearch を動かすことができます。
設定例
initialParameter: 'limit=10&offset=0'
resultMetaTitleRewrite オプションに false を設定すると、flexibleSearch.js によるメタタイトルの書き換えが無効になります。
フォームがsubmitされ、ページが遷移する前に呼ばれる関数を設定できます。この関数にはシリアライズされたパラメータの配列paramArrayが渡されます。
設定例
submitAction: function (paramArray) {
var dataapi = false, l = paramArray.length;
for (var i = 0; i < l; i++) {
if (paramArray[i].name === "category" && paramArray[i].value === "movabletype") {
dataapi = true;
}
}
if (dataapi) {
for (var i = 0; i < l; i++) {
if (paramArray[i].name === "dataId") {
paramArray[i].value = "entries";
}
}
}
return paramArray;
},
jQuery.ajaxでエラーが起きたときに呼ばれる関数を設定できます。
設定例
ajaxError: function (jqXHR, textStatus, errorThrown) {
window.alert(textStatus);
},
通常の検索で絞り込まれた検索結果JSONを、独自の検索ロジックでフィルターすることができます。このオプションはv2.2.0で追加されました。
このオプションに設定した関数に検索結果JSONの1アイテムずつが渡され、この関数でfalseを返すと、そのアイテムは検索結果JSONから削除されます。
このオプションに設定した関数には下記の2つの引数が渡されます。
function(item, paramObj){
// do something
}
- item : 検索結果JSONから渡される1アイテムのプレーンオブジェクト
- paramObj : パラメータオブジェクト。パラメータの値は
paramObj["キー"]で取り出すことができます。
設定例
customSearch: function(item, paramObj){
// ageプロパティの値が20以上の場合は検索結果に残す
return item.age >= 20;
},
通常の検索と独自の検索ロジックで絞り込まれた JSON に対して処理を加えることができます。 sortBy パラメータとは別に複数条件による複雑なソート処理などを加える場合はこのオプションを利用します。このオプションはv2.2.3で追加されました。
このオプションで設定した関数には、通常の検索と独自の検索ロジックで絞り込まれた JSON が渡されます。この JSON に処理を加えて、 return で返却します。
function(json){
// do something
return json;
}
- json : 通常の検索と独自の検索ロジックで絞り込まれた JSON
検索結果をHTMLに出力する直前に検索結果JSONを加工することができます。このオプションはv2.2.0で追加されました。
このオプションに設定した関数に検索結果JSON全体が渡され、この関数で返したJSONが検索結果のHTML出力に使われます。
このオプションに設定した関数には下記の1つの引数が渡されます。
function(resultJSON){
// do something
}
- resultJSON : 検索結果のHTMLを出力する直前の検索結果JSON
resultJSONはtotalResultsとitemsのプロパティを持つオブジェクトで、
resultJSON.totalResultsで検索結果総数に、
resultJSON.itemsで検索結果のアイテムオブジェクトが並んだ配列にアクセスすることができます。
設定例
modifyResultJSON: function(resultJSON){
for (var i = 0, l = resultJSON.items.length; i < l; i++) {
// do something
}
return resultJSON;
},
検索結果メッセージのHTMLを加工することができます。
このオプションに設定した関数に検索結果メッセージのHTMLが渡され、この関数で返したHTMLが検索結果メッセージのHTML出力に使われます。
このオプションに設定した関数には下記の1つの引数が渡されます。
function(html){
// do something
}
- html : 検索結果メッセージのHTML
設定例
// 全角数字を半角数字に変換する
modifyResultMsgHTML: function(html){
var zenkaku = {
"０":"0",
"１":"1",
"２":"2",
"３":"3",
"４":"4",
"５":"5",
"６":"6",
"７":"7",
"８":"8",
"９":"9"
};
html = html.replace(/([０１２３４５６７８９])/g, function(match, p1, offset, string){
return zenkaku[p1];
});
return html;
},
検索結果一覧のHTMLを加工することができます。
このオプションに設定した関数に検索結果一覧のHTMLが渡され、この関数で返したHTMLが検索結果一覧のHTML出力に使われます。
このオプションに設定した関数には下記の1つの引数が渡されます。
function(html){
// do something
}
- html : 検索結果一覧のHTML
設定例
// URL文字列をリンクにする
modifyResultItemHTML: function(html){
return html.replace(/(https?:\/\/[\w\/:%#\$&\?\(\)~\.=\+\-]+)/gi, "<a href=\"$1\">$1</a>");
},
ページ分割のHTMLを加工することができます。
このオプションに設定した関数にページ分割のHTMLが渡され、この関数で返したHTMLがページ分割のHTML出力に使われます。
このオプションに設定した関数には下記の1つの引数が渡されます。
function(html){
// do something
}
- html : ページ分割のHTML
設定例
// URL文字列をリンクにする
modifyPaginateHTML: function(html){
// do something
return html;
},
検索結果をページのDOMに挿入した後に呼ばれる関数を設定します。このオプションに設定した関数の戻り値は特に影響を及ぼしません。直接DOMを操作するなどしてください。
このオプションに設定した関数には下記の1つの引数が渡されます。
function(totalResults){
// do something
}
- totalResults : 検索結果総数
設定例
// URL文字列をリンクにする
resultComplete: function(totalResults){
// メタタイトルと同じ物をog:titleにセットする
$('meta[property="og:title"]').attr('content', document.title);
return;
},
パラメータのうち検索から除外する項目をカンマ区切りで指定します。
excludeParamsにはあらかじめ下記の項目が設定されています。つまり、下記の項目の値は検索には利用できません。
- search
- dataId
- offset
- limit
- sortBy
- sortOrder
- sortType
設定例
excludeParams: "tags,prices",
JSON の項目のうちキーワード検索の対象から除外する項目をカンマ区切りで指定します。
設定例
excludeSearchParams: "title,keywords",