问在Wordpress中使用PHP和JQuery实现多输入的Ajax搜索表单| Data Fetch

EN

<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();
}