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