送信ボタンを押さずに検索結果を表示する


この機能は Ver. 3.2 で上位互換である「htmx」が組み込みJSとして標準機能に組み込まれたため、Ver. 3.2 より非推奨になりました。

代替機能として、組み込みJS「htmx」の利用を推奨いたします。

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのポストインクルード機能を利用します。(Ver. 1.3.0より)

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとフォームの送信ボタンを押さずに同じページ内で検索結果を表示することができます。

デモ


この部分が置き換わります。

実装方法

ここでは例として、ある特定のキーワードで検索した場合の検索結果を表示する手順を説明します。

基本的な設定方法についてはページを移動せずにフォームの検索結果を表示する(post include)を参考にしてください。下記の箇所を変更することで送信ボタンを押さずに結果を表示するようになります

変更前

<form action="" method="post" class="js-post_include">

変更後

<form action="" method="post" class="js-post_include-ready">