Search query with filter

admin

Administrator
Staff member
Thanks to the help of stack overflow I was able to make my filter work(<a href="https://stackoverflow.com/questions/65347618/ajax-filter-for-wordpress">Ajax filter for wordpress</a>) but now I want to add a search input that search the titles of my posts (a custom post type called 'Contratistas').
So I have a few questions:
<ol>
<li>My form for my filter has POST, but the search (i've seen examples) always has GET, so, should I have two separete forms? If so, is there a way for submiting my search without a button? this is my code:</li>
</ol>
Code:
&lt;form id=&quot;searchform&quot; method=&quot;get&quot; action=&quot;&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;search-field mb-3&quot; name=&quot;s&quot; placeholder=&quot;Search&quot; value=&quot;&lt;?php echo get_search_query(); ?&gt;&quot;&gt;
    &lt;input type=&quot;submit&quot; value=&quot;Search&quot; class=&quot;mb-3&quot;&gt;
&lt;/form&gt;
&lt;form action=&quot;&lt;?php echo site_url() ?&gt;/wp-admin/admin-ajax.php&quot; method=&quot;POST&quot; id=&quot;filter&quot;&gt;
    &lt;div class=&quot;titulo mb-3&quot;&gt;
        &lt;h3&gt;Región&lt;/h3&gt;
    &lt;/div&gt;
    &lt;?php
            if( $terms = get_terms( array( 'taxonomy' =&gt; 'region', 'orderby' =&gt; 'name' ) ) ) : 
     
                echo '&lt;select name=&quot;filtroRegion&quot;&gt;&lt;option value=&quot;&quot;&gt;Seleccione una región&lt;/option&gt;';
                foreach ( $terms as $term ) :
                    echo '&lt;option value=&quot;' . $term-&gt;term_id . '&quot;&gt;' . $term-&gt;name . '&lt;/option&gt;'; // ID of the category as the value of an option
                endforeach;
                echo '&lt;/select&gt;';
            endif;
            
        ?&gt;
        &lt;div class=&quot;titulo my-3&quot;&gt;
            &lt;h3&gt;Industrias&lt;/h3&gt;
        &lt;/div&gt;
        &lt;?php   
            if( $terms = get_terms( array( 'taxonomy' =&gt; 'industria', 'orderby' =&gt; 'name' ) ) ) : 
     
                echo '&lt;select name=&quot;filtroIndustria&quot;&gt;&lt;option value=&quot;&quot;&gt;Seleccione una industria&lt;/option&gt;';
                foreach ( $terms as $term ) :
                    echo '&lt;option  value=&quot;' . $term-&gt;term_id . '&quot;&gt;' . $term-&gt;name . '&lt;/option&gt;'; // ID of the category as the value of an option
                endforeach;
                echo '&lt;/select&gt;';
            endif;
        ?&gt;
            &lt;button class=&quot;my-3 filtrar&quot;&gt;Filtrar&lt;/button&gt;
            &lt;button&gt;&lt;a href=&quot;&quot; id=&quot;clear&quot;&gt;Limpiar filtros&lt;/a&gt;&lt;/button&gt;
            &lt;input type=&quot;hidden&quot; name=&quot;action&quot; value=&quot;myfilter&quot;&gt;
&lt;/form&gt;
As you can see i have two buttons but i only want the last one ('Filtrar')
<ol start="2">
<li>I have no idea how to implement the search with the filters so that i can put my results in the same fashion as the one i get from the dropdowns.</li>
</ol>
Here is my filter:
<pre class="lang-js prettyprint-override">
Code:
$args = array(
    'orderby' =&gt; 'date', // we will sort posts by date
    'order' =&gt; $_POST['date'], // ASC or DESC
    'post_per_page' =&gt; -1,
    'post_type' =&gt; 'contratista'
);

if (!empty($_POST['filtroRegion']) || !empty($_POST['filtroIndustria'])) {
    $args['tax_query'] = array();

    if (!empty($_POST['filtroRegion'])) {
        $args['tax_query'][] = array(
            'taxonomy' =&gt; 'region',
            'terms' =&gt; $_POST['filtroRegion']
        );
    }

    if (!empty($_POST['filtroIndustria'])) {
        $args['tax_query'][] = array(
            'taxonomy' =&gt; 'industria',
            'terms' =&gt; $_POST['filtroIndustria']
        );
    }

    if (count($args['tax_query']) &gt; 1) {
        $args['tax_query']['relation'] = 'AND';
    }
}

$query = new WP_Query($args);
And my JQuery:
Code:
jQuery(function($) {
    $('#filter').submit(function() {
        var filter = $('#filter');
        $.ajax({
            url: filter.attr('action'),
            data: $('#filter :input').filter(function(index, element) { return $(element).val() != ''; }).serialize(), // form data
            type: filter.attr('method'), // POST
            beforeSend: function(xhr) {
                filter.find('.filtrar').text('Procesando...'); // changing the button label
            },
            success: function(data) {
                filter.find('.filtrar').text('Filtrar'); // changing the button label back
                $('#response').html(data); // insert data
            }
        });
        return false;
    }
}
Any help or guidance will be very appreciated. Thanks