2010年02月19日

a-blog cmsでAjax検索機能を実装 (1.2.2b)

普通に検索するフォームを作ると、以下のように書きます。

<form action="" method="post">
<input type="text" name="keyword" size="30" value="" />
<input type="submit" name="ACMS_POST_2GET" value="検索" id="submit" class="submit" />
<input type="hidden" name="tpl" value="searchList.html" />
</form>

実際の動作すると以下のような感じになります。お試し下さい。（ページが切り替わります）

ここからが今回の本番。class="js-post_include" target="#result" を form につけます。 そして、form とは別に検索結果を表示させる div を追加します。 div の id="result" と target="#result" が同じに設定します。

<form action="" method="post" class="js-post_include" target="#result">
<input type="text" name="keyword" size="30" value="" />
<input type="submit" name="ACMS_POST_2GET" value="検索" id="submit" class="submit" />
<input type="hidden" name="tpl" value="searchList.html" />
</form>
<div id="result">
<p>（検索されるとココが置き換わります）</p>
</div>

そして、こちらもお試し下さい。 画面のリロード無しで searchList.html を読み込む事ができます。

（検索されるとココが置き換わります）

そして、searchList.html には Entry_List のモジュールが書かれており、モジュールIDを設定し、keyword 部分にチェックがつけて keyword に反応するように設定してあります。 たった10分くらいの作業で Ajax 検索機能を実装する事ができました。

例えば、改ページ部分をこの機能を利用して、Entry_Body を読み込めば改ページ無しで、次のエントリーを追加表示させたりする事もシステム本体は、そのままでテンプレートのカスタマイズだけで実装する事が可能です。

1.2.2bという未配布のバージョンのものについて書いていますので、もう少しだけお待ち下さいね。

関連タグablogcmsAjaxモジュール

関連エントリー

上記のエントリーについているタグと関連にするエントリーをいくつかピックアップしています。

login

a-blog cms