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という未配布のバージョンのものについて書いていますので、もう少しだけお待ち下さいね。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

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

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

店内からのアクセスがあった時のみ表示させるタッチモジュール ( Touch_Ip )

日付の選択を表示させるモジュール

a-blog cms のエントリーのフィールド順って何だ?

a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法)

最新記事

カテゴリー

アーカイブ

ハッシュタグ