コンテンツの読み込みに時間がかかっています
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という未配布のバージョンのものについて書いていますので、もう少しだけお待ち下さいね。
