使用 PHP 和 JQuery 在 Wordpress 中具有多个输入的 Ajax 搜索表单数据获取

Question

我的代码运行良好，但我需要在其中添加 2 个下拉菜单：

这是我输入值的地方：

<form>
<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search..">    
</form>

我希望它看起来像这样：

 <form>
    <input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search..">   
    <select>
       <option>location category</option>
       <option>option2</option>
    </select>
     <select>
       <option>category</option>
       <option>option2</option>
    </select>
  </form>

我把这段代码放在functions.php中它工作正常

<script type="text/javascript">
    
function fetch(){
    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data:{ action: 'data_fetch', keyword: jQuery('#keyword').val() },
        success: function(data) {
            jQuery('#datafetch').html( data );
        }
    });

}
</script>

<?php
}

// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( 
      array( 
        'posts_per_page' => -1, 
        's' => esc_attr( $_POST['keyword'] ), 
        'post_type' => 'locations' 
      ) 
    );

    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post();

$myquery = esc_attr( $_POST['keyword'] );
$a = $myquery;
$search = get_the_title();
if( stripos("/{$search}/", $a) !== false) {?>
             
        <div class="city-results">
            <a href="<?php the_permalink();?>">
                <h3>
                <?php the_title();?>
                </h3>
            </a>
            
        </div>

        <?php }
    endwhile;
        wp_reset_postdata();  
    endif;

    die();
}
?>

我想我们需要编辑这个获取数据的区域

data:{ action: 'data_fetch', keyword: jQuery('#keyword').val() },

我尝试使用此方法但不起作用：

data:{ action: 'data_fetch', keyword: jQuery('#keyword , #keyword2').val() },

但我是 Jquery/Ajax 的菜鸟

如果有人在此帮助我，请提前致谢

Answer 1

您需要将两个下拉值都传递给ajax 数据参数。检查下面的代码。

<form>
    <input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search..">   
    <select name="location" id="location">
       <option>location category</option>
       <option>option2</option>
    </select>
     <select name="category" id="category">
       <option>category</option>
       <option>option2</option>
    </select>
</form>

<script type="text/javascript">

    function fetch(){
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            data:{ 
                action: 'data_fetch', 
                keyword: jQuery('#keyword').val(),
                location: jQuery('#location').val(),
                category: jQuery('#category').val()
            },
            success: function(data) {
                jQuery('#datafetch').html( data );
            }
        });

    }
</script>

// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    echo $_POST['location']." ".$_POST['category'];

    $the_query = new WP_Query( 
      array( 
        'posts_per_page' => -1, 
        's' => esc_attr( $_POST['keyword'] ), 
        'post_type' => 'locations' 
      ) 
    );

    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post();

        $myquery = esc_attr( $_POST['keyword'] );
        $a = $myquery;
        $search = get_the_title();
        if( stripos("/{$search}/", $a) !== false) {?>
                     
                <div class="city-results">
                    <a href="<?php the_permalink();?>">
                        <h3>
                        <?php the_title();?>
                        </h3>
                    </a>
                    
                </div>

        <?php }
    endwhile;
        wp_reset_postdata();  
    endif;

    die();
}