wordpress AJAXで絞り込みリアルタイム検索をしたい
-
以下の質問と選択肢があります。
Q1 A1 A2 A3
Q2 A2 A2 A3
Q3 A1 A2 A3
Q4 A1 A2 A3Qはカスタムフィールド
Aはチェックボックスとなっております。https://sim.hyouban-hikaku.com/
ここのサイトにあるような絞り込み検索をしたいです。
上記サイトはすでに表示されてるのをjsでソートしてるだけですが、当方がやりたいのは普通の記事検索のようにDBから取ってくるやつです。
下記まで(チェックボックス1個)は動作しましたが、
複数チェックボックスだとやり方がわかりません。ご教授お願いします。
jsの記述
$(function(){ // 2重クリック防止フラグ var click_flag = true; // ボタンクリックイベント $('.search_frame input').change(function(e){ if ( click_flag ) { click_flag = false; $('.result li').remove(); $('.result').append('<li class="loading">読み込み中</li>'); // チェックボックスで選択されているvalueを取得 var check_01 = $('.search_frame input#l11').val(); //alert(check_01); $.ajax({ type: "POST", url: ajaxurl, data: { // データ受け渡し 'check_01' : check_01, 'action' : 'ajax_get_posts', }, success: function( response ) { $('.result .loading').remove(); jsonData = JSON.parse( response ); var count = jsonData.length; if ( count == '0' ) { // 検索結果がない場合 $('.result').append('<li>検索結果がありません。</li>'); } else { // リストに出力 $.each( jsonData, function( i, val ) { $('.result').append('<li><a href="' + val['permalink'] + '">' + val['post_title'] + '</a></li>'); }); } click_flag = true; }, error: function( response ) { // ajaxエラーの場合 $('.result .loading').remove(); $('.result').append('<li>エラーが起こりました。お手数ですがページの再読み込みを行ってください。</li>'); click_flag = true; } }); } }); });
functionの記述
// get_postsでデータをjsonへ function ajax_get_posts(){ // jsから受け渡しするデータ $select_01 = $_POST['search_frame']; $returnObj = array(); // get_posts オプション $args = array( 'post_type' => 'post', 'numberposts' => -1 ); $posts = get_posts( $args ); foreach( $posts as $key => $post ) { $returnObj[$key] = array( // 出力するデータを格納 'post_title' => $post->post_title, 'permalink' => get_permalink( $post->ID ), ); } // json形式に出力 echo json_encode( $returnObj ); die(); } add_action( 'wp_ajax_ajax_get_posts', 'ajax_get_posts' ); add_action( 'wp_ajax_nopriv_ajax_get_posts', 'ajax_get_posts' );
ヘルプの必要なページ: [リンクを見るにはログイン]
- トピック「wordpress AJAXで絞り込みリアルタイム検索をしたい」には新たに返信することはできません。