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

昨晩書いた a-blog cmsでAjax検索機能を実装 (1.2.2b) では、以下のように書いています。

<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>

(検索されるとココが置き換わります)

今回は、SUBMITボタンを押さないで表示させるような事をしてみたいと思います。

class="js-post-include"class="js-post-include-ready"-ready" を追記します。 また、検索の条件になる keyword の value を設定しておきます。

これで、検索のボタンを押さなくても(検索されるとココが置き換わります)が置き換わって表示されるようになります。

<form action="" method="post" class="js-post_include-ready" target="#result">
<input type="text" name="keyword" size="30" value="CSS" />
<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>

であれば、入力やボタンが無くてもいい事になりますので、さらに以下のように修正します。

<form action="" method="post" class="js-post_include-ready">
<input type="hidden" name="keyword" size="30" value="CSS" />
<input type="submit" name="ACMS_POST_2GET" />
<input type="hidden" name="tpl" value="searchList.html" />
</form>

随分、すっきりした感じですね。 条件の設定ができませんが、以下の部分には CSS で検索された結果が表示されているハズです。 ソースは上記の form タグが書かれています。

いかがでしょうか? こんな感じに class="js-post_include-ready" を利用する事ができます。 その3 では、検索エンジンのキーワードに反応させる方法というのを書いて見ます。

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


関連記事

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

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

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

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

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

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

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

a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定)

最新記事

カテゴリー

アーカイブ

ハッシュタグ