Support » Developing with WordPress » Ajax search – remove search results if the srch field is empty + excluding pages

  • Resolved halohtlo

    (@halohtlo)


    Hey there,
    basically I have an ajax search that displays my website’s current pages while typing for a specific keyword -BUT- once I clear the search box, all of the pages remain there and won’t get cleared.

    Also do you guys have any idea how can I exclude pages from being searched with my current code?
    Thank you all for the help.

    functions.php

    function data_fetch(){
    
    $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( 
    $_POST['keyword'] ), 'post_type' => 'page' ) );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>
    
            <h2><a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title();?></a></h2>
    
        <?php endwhile;
        wp_reset_postdata();  
    endif;
    
    die();
    	
    }

    Ajax

    function fetch(){
    jQuery.ajax({
        url: "mywebsite/wp-admin/admin-ajax.php",
        type : "POST",
        data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
        success: function(data) {
    		if('#keyword'=="") 
    		{
      		jQuery('#datafetch').html("");
      		return;
    		}
    		else
    		{
    		jQuery('#datafetch').html( data );
    		}
        }
    	
    });
    };
    • This topic was modified 6 months, 1 week ago by halohtlo.
    • This topic was modified 6 months, 1 week ago by halohtlo.
Viewing 5 replies - 1 through 5 (of 5 total)
  • For some reason I can’t edit the main post,
    I forgot to add the form itself:

    <input type="text" name="keyword" id="keyword" onkeyup="fetch()"/>
    <div id="datafetch">Search results will appear here</div>

    if('#keyword'=="") should be if ( jQuery('#keyword').val() == "" )

    A better solution would be:

    function fetch() {
    	var input = $.trim( jQuery('#keyword').val() );
    
    	if ( input.length > 0 ) {
    		jQuery.ajax({
    		    url: "mywebsite/wp-admin/admin-ajax.php",
    		    type : "POST",
    		    data: { action: 'data_fetch', keyword: input },
    		    success: function(data) {
    			jQuery('#datafetch').html( data );
    		    }
    		});
    	}
    }

    Also if you prefer to use the $ for jQuery you can wrap your code in a closure like this:

    ( function( $ ) {
      // JS code
    } ( jQuery ) )

    `

    Looks like the solution I’ve been searching for although it didn’t work out in the first place I had to add one more ‘if’ condition.
    Thank you for the help mate, much appreciated.

    Do you have any idea how can I exclude pages from being searched with my current code?

    • This reply was modified 6 months, 1 week ago by halohtlo.
    • This reply was modified 6 months, 1 week ago by halohtlo.
    • This reply was modified 6 months, 1 week ago by halohtlo.
    Moderator bcworkz

    (@bcworkz)

    To exclude pages, first compile a list of page IDs you wish to exclude into an array. Pass the array as a “post__not_in” argument when you instantiate WP_Query. Something like:

    $the_query = new WP_Query( array(
      'posts_per_page' => -1,
      's' => esc_attr( $_POST['keyword'] ),
      'post_type' => 'page',
      'post__not_in' => array(123,234,356,),
    ) );

    FYI: posts in these forums are only editable for 30 minutes after posting. Afterwards they are locked in.

    Thank you very much mate.I also found something useful in the documentation and updated it a little bit.
    Here’s a working code for excluding pages by their ID’s for anyone having problems with it.

    $post_ids = array(2461);
    $the_query = new WP_Query(array( 
    			'posts_per_page' => -1, 
    			's' => esc_attr($_POST['keyword'] ), 
    			'post_type' => 'page',
    			'post__not_in' => $post_ids
    			) );
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Ajax search – remove search results if the srch field is empty + excluding pages’ is closed to new replies.