I’m having an issue creating an ajax search on my single post pages. I need to limit the search results to the custom post types “fod_videos” and “post” and category 12. My issue is the search is returning all the posts under those filters and not taking the search value. I’m guessing I’m missing something obvious but I can’ figure it out. Here’s my setup.
<div class="panel">
<h2>Search Videos</h2>
<div id="my-search">
<form role="search" method="get" id="searchform" action="http://myurl.com/" >
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div>
</div>
add_action('wp_ajax_wpa5000_search', 'wpa5000_search');
add_action('wp_ajax_nopriv_wpa5000_search', 'wpa5000_search');
function wpa5000_search(){
global $wp_query;
$search = $_POST['search_val'];
$args = array(
's' => $search,
'posts_per_page' => 10,
'cat' => 12,
'post_type' => array( 'post','fod_videos' )
);
$wp_query = new WP_Query( $args );
get_template_part( 'video-search-results' );
exit;
}
add_action( 'wp_enqueue_scripts', 'wpa56343_scripts', 100 );
function wpa56343_scripts() {
wp_enqueue_script(
'wpa56343_script',
get_template_directory_uri() . '/libs/search.js?ver=1.0',
array( 'jquery' ),
null,
false
);
wp_localize_script(
'wpa56343_script',
'WPaAjax',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
)
);
}
// search.php
$(document).ready(function($){
$('#searchsubmit').click(function(e){
var $panel = $(this).closest(".panel");
$panel.empty();
e.preventDefault();
var search_val=$("#s").val();
$.post(
WPaAjax.ajaxurl,
{
action : 'wpa5000_search',
search_val : search_val
},
function( response ) {
$panel.append( response );
}
);
});
});
//video-search-results.php
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?> //STUFF <?php endwhile; ?>
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
Instead of 'cat' => 12 and $wp_query use 'category_name' => slug and get_posts().
Here is a basic example how it works:
PHP
add_action( 'wp_loaded', array ( 'T5_Ajax_Search', 'init' ) );
/**
* Ajaxify the search form.
*/
class T5_Ajax_Search
{
/**
* The main instance. You can create further instances for unit tests.
* @type object
*/
protected static $instance = NULL;
/**
* Action name used by AJAX callback handlers
* @type string
*/
protected $action = 't5_ajax_search';
/**
* Handler for initial load.
*
* @wp-hook wp_loaded
* @return void
*/
public static function init()
{
NULL === self::$instance and self::$instance = new self;
return self::$instance;
}
/**
* Constructor. Registers the actions.
*
* @wp-hook wp_loaded
* @return object
*/
public function __construct()
{
$callback = array ( $this, 'search' );
add_action( 'wp_ajax_' . $this->action, $callback );
add_action( 'wp_ajax_nopriv_' . $this->action, $callback );
add_action( 'wp_enqueue_scripts', array ( $this, 'register_script' ) );
}
/**
* Callback for AJAX search.
*
* @wp-hook wp_ajax_t5_ajax_search
* @wp-hook wp_ajax_nopriv_t5_ajax_search
* @return void
*/
public function search()
{
$args = array ( 's' => $_POST['search_term'] );
$args = apply_filters( 't5_ajax_search_args', $args );
$posts = get_posts( $args );
if ( $posts )
{
$this->render_search_results( $posts );
}
else
{
print '<b>nothing found</b>';
}
exit;
}
/**
* Create markup from $posts
*
* @param array $posts Array of post objects
* @return void
*/
protected function render_search_results( $posts )
{
print '<ul class="t5-ajax-search-results">';
foreach ( $posts as $post )
{
printf(
'<li><a href="%1$s" rel="nofollow noreferrer noopener">%2$s</a></li>',
get_permalink( $post->ID ),
esc_html( $post->post_title )
);
}
print '</ul>';
}
/**
* Register script and local variables.
*
* @wp-hook wp_enqueue_scripts
* @return void
*/
public function register_script()
{
wp_enqueue_script(
't5-ajax',
#plugins_url( __FILE__ ) . '/search.js',
plugins_url( 'search.js', __FILE__ ),
array ( 'jquery' ),
NULL,
TRUE
);
wp_localize_script(
't5-ajax',
'T5Ajax',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'action' => $this->action
)
);
}
}
JavaScript search.js
jQuery( function( $ ) {
// search filed
var $s = $( '#s' );
// the search form
var $sForm = $s.closest( 'form' );
console.log( $sForm );
$sForm.on( 'submit', function( event) {
event.preventDefault();
$.post(
T5Ajax.ajaxurl,
{
action: T5Ajax.action,
search_term: $s.val()
},
function( response ) {
// just append the result to the search form.
$sForm.append( response );
}
);
});
});
Restricting the search
add_filter( 't5_ajax_search_args', 'restrict_t5_search' );
function restrict_t5_search( $args )
{
$args['post_type'] = array ( 'post', 'fod_videos' );
$args['category_name'] = 'category-slug';
return $args;
}
Instead of my $this->render_search_results( $posts ); you can also load a template from your theme and use the $posts array in a more sophisticated result. 🙂
Method 2
I got the original code working, but with the custom post type (without the categories). Add a hidden input in your form with your post type like this:
<input type="hidden" name="post_type" value="fod_videos" />
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0