• 以下の質問と選択肢があります。

    Q1 A1 A2 A3
    Q2 A2 A2 A3
    Q3 A1 A2 A3
    Q4 A1 A2 A3

    Qはカスタムフィールド
    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で絞り込みリアルタイム検索をしたい」には新たに返信することはできません。