Ajax search – remove search results if the srch field is empty + excluding pages

  • Resolved halohtlo

    (@halohtlo)


    5 years, 10 months ago

    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 5 years, 10 months ago by halohtlo.
    • This topic was modified 5 years, 10 months ago by halohtlo.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter halohtlo

    (@halohtlo)

    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 ) )

    `

    Thread Starter halohtlo

    (@halohtlo)

    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 5 years, 10 months ago by halohtlo.
    • This reply was modified 5 years, 10 months ago by halohtlo.
    • This reply was modified 5 years, 10 months 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.

    Thread Starter halohtlo

    (@halohtlo)

    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.