0

I have a search field. There is no issue with the search if I enter anything on this and click on button then it's redirecting on the page where I can get my search result.

What I am doing is, I have to display the category dropdown auto search list when the user enters any text in the search field. I found one plugin (https://wordpress.org/plugins/ajax-search-lite/) also demo here (https://lite.ajaxsearchpro.com/). I am trying to do the same but I can't use the plugin.

I need to know what query I have to use on the ajax to get the output?

Form code

function search_form($atts) { 
     $form = '<section class="universalSearch"><div class="search search-form"><form role="search" method="get" action="' . home_url( '/' ) . '" >
    <label class="screen-reader-text" for="s">SEARCH</label>
     <input type="search" class="search-field universalSearchField" value="' . get_search_query() . '" name="s"  placeholder="Search" id="searchdata" />
     <input type="submit" id="searchsubmit" class="search-submit" value="'. esc_attr__('Go', 'domain') .'" />
     </form></div></section>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script>

             (function($) {  // ready handler
$(".universalSearchField").keypress(function() {
     $.ajax({
        url: "/wp-admin/admin-ajax.php",
        type: "post",
        data: { action: "universalSearchlist", keyword: $("#searchdata").val() },
        success: function(data) {
            $("#autocategories").html(data);
        }
    });
    });

    })(jQuery);
        </script>';
    
     return $form;
}

add_shortcode( 'get_search_form', 'search_form');

AjAX code

add_action('wp_ajax_universalSearchlist','universalSearch');
add_action('wp_ajax_nopriv_universalSearchlist','universalSearch');
function universalSearch(){
    $data='';
    $args = array(
     's' => $_REQUEST[ 'universalSearchlist' ],
     'cat' => 'category'
);
    
    $the_query = new WP_Query( $args );
    foreach ($the_query->posts as $post) {
        var_dump($post);
    }
    

    //endif;
    //die();
    return $data;
    
}
3
  • What do you mean by "category dropdown"? The plugin demo doesn't have any category dropdown there, just a search box where you can type a keyword and then the search results (posts with thumbnail, title and excerpt) are loaded via AJAX right onto the current page. Edit: Never mind, I saw it.
    – Sally CJ
    Aug 24 '20 at 10:36
  • I have to display my category on dropdown instated of the post. I mean I have to display my category list when user enter on search Aug 24 '20 at 11:22
  • That plugin displaying the post i have to display category Aug 24 '20 at 11:25
0

I need to know what query I have to use on the AJAX to get the output?

In the comments, you said, "I am looking to search only for categories", so for that, you can simply use get_categories() (or get_terms() for custom taxonomies) and set the search arg to the submitted search keyword:

// Get the categories assigned to ANY posts that matched the search keyword.
$terms = get_categories( array(
    'search' => sanitize_text_field( $_REQUEST['universalSearchlist'] ),
) );

// Then display the categories or do whatever is necessary. (I used 'echo' for testing.)
foreach ( $terms as $term ) {
    $cat_link = get_category_link( $term );
    echo '<a href="' . esc_url( $cat_link ) . '">' . esc_html( $term->name ) . '</a><br>';
}

/* Or using get_terms():
$terms = get_terms( array(
    'search'   => sanitize_text_field( $_REQUEST['universalSearchlist'] ),
    'taxonomy' => 'your_taxonomy',
) );

if ( ! is_wp_error( $terms ) ) {
    foreach ( $terms as $term ) {
        ... your code.
    }
}
*/

So there's no need for WP_Query unless if you wanted only the categories assigned to posts that matched the search keyword.

Additional Notes

  1. Actually, I suggest you to use the REST API for searching the categories — e.g. you'd make your AJAX requests to example.com/wp-json/wp/v2/categories?search=<keyword>, but you can ask another question for that.

  2. In your universalSearch() function, you should call wp_die() and there's no need to return anything (the wp_ajax_ hooks are action hooks, not filter hooks).

  3. You should really enqueue your scripts (.js) using wp_enqueue_script() and you should just use the default jQuery script that came bundled with WordPress.

  4. Your AJAX JS is not actually sending the search keyword to the server, so in addition to the action parameter, you should add universalSearchlist: $( this ).val() to the second parameter for $.post().

13
  • Give me some time to check your answer Aug 24 '20 at 12:25
  • I have tried your code, I have 3 categories, Movies, Books and Fruits, and when I enter any letter in the search field then I am getting my above categories but the issue is here, If I enter Mov then also I am getting my all three categories. I have to show only Movies like search function. Aug 26 '20 at 6:25
  • I think I have to use like in query for searching the records Aug 26 '20 at 7:08
  • Actually, are you looking to search for posts or only categories that matched the search keyword (regardless of what posts the categories are assigned to)?
    – Sally CJ
    Aug 26 '20 at 13:12
  • 1
    Yes,it's working for me, instated of $_REQUEST['universalSearchlist'] i have to use $_REQUEST['keyword'] Aug 27 '20 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.