AjaxSearch についてのまとめ｜webdirector.jp - ウェブを便利に！ウェブで元気に！

当サイトにAjaxSearch を実装した際の忘備録です。

情報源が結構少ない AjaxSearch

AjaxSearch については、結構な時間を費やして調査したが、その全貌を理解するのには随分と時間がかかった。
たとえば、日本公式サイトには「不動産物件検索システムやDVDカタログ検索など、複数の検索項目に対応することもできます。」の記述があるが、複合検索の実装には、開発元にペイパル支払いをして有料版スニペットを導入しなければならない。それが分かるまで、できるものと思い込んでいて失敗したと感じた経験もある。
そうしたことも思い出しながらまとめるとともに、当サイトの blog にも実装することにする。

現在、開発元サイト（http://www.evo.wangba.fr/index.php?id=8）が利用不可であり、幾ばくかの不安があるのだが…

参考ドキュメント

実装方法

最新のソースコード（ローカライズ版1.93b）を、https://github.com/modxcms-jp/evolution-jp/downloadsからダウンロード。
AjaxSearch を MODX にインストール。
AjaxSearch を呼び出すチャンク（blog_search）を作成（ソースコード後述）、ajaxモード検索。
templates ディレクトリにある「ajaxResult.tpl.html」「ajaxResults.tpl.html」「ajaxGrpResult.tpl.html」（*1) を使用してそれぞれチャンクを作成。
サイドバーサブメニュー下に検索フォームを配置して動作確認。
chrome の「要素を検証」メニューで HTML の構造および名前を見ながら CSS を調整してフォームおよび検索結果の見た目整形（レシポンシブルデザイン3種）。

AjaxSearch を呼び出しているチャンク

[!ajaxSearch?
&ajaxSearch = `1`
&jscript = `jquery`
&tplInput = `input_keyword`
&ajaxMax = `10`
&showIntro = `0`
&minChars = `2`
&parents =`10`
&tplAjaxGrpResult = `AjaxGrpResult`
&tplAjaxResults = `AjaxResults`
&tplAjaxResult = `AjaxResult`
&extract = `0`
!]

CSS の調整（デフォルトデザイン）

/* blog search */
div.blog_search,
div#ajaxSearch_output {
	width: 250px;
	margin: 20px 0;
	font-size: 90%;
}
div.blog_search fieldset {
	border: none;
}
input#ajaxSearch_submit {
	padding: 0 0.5em;
	letter-spacing: 0.2em;
}
p.AS_ajax_resultsInfos {
	padding: 0 0 5px 0;
	line-height: 1.4;
	font-size: 90%;
}
span.ajaxSearch_highlight {
	font-weight: bold;
}
div.AS_ajax_grpResultName {
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px dotted #d0e6f5;
	line-height: 1.4;
	font-size: 90%;
}
div.AS_ajax_result {
	margin: 0 0 5px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px dotted #d0e6f5;
}
a.AS_ajax_resultLink:before {
	font-family: 'icon';
	content: "\f101  ";
}
span.AS_ajax_resultDescription {
	display: block;
	margin: 0 0 0 1em;
}
div.AS_ajax_resultExtract {
	font-size: 90%;
	line-height: 1.4;
}

max-width:980px と　max-width: 760px　のレシポンシブル部は記述していないが微調整ですんだ。

memo

パッケージ同梱のテンプレートを利用して、極力手間なく基本的動作の実装につとめた。表示はcssのみで調整し、(*1) の検索結果テンプレート（チャンク）には全く手を入れていない。

「&extract = `0`」として、検索結果のリンクタイトルと description（display:block;）以外は表示されないようにした。

AjaxSearch についてのまとめ