Ich habe ein Problem beim Erstellen einer Ajax-Suche auf meinen einzelnen Postseiten. Ich muss die Suchergebnisse auf die benutzerdefinierten Beitragstypen "fod_videos" und "post" und Kategorie 12 beschränken. Mein Problem ist, dass die Suche alle Beiträge unter diesen Filtern zurückgibt und nicht den Suchwert verwendet. Ich vermute, ich vermisse etwas Offensichtliches, aber ich kann es herausfinden. Hier ist mein 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; ?>
Verwenden Sie anstelle von 'cat' => 12
und $wp_query
'category_name' => slug
und get_posts()
.
Hier ist ein einfaches Beispiel, wie es funktioniert:
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">%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
)
);
}
}
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 );
}
);
});
});
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;
}
Anstelle meiner $this->render_search_results( $posts );
können Sie auch eine Vorlage aus Ihrem Design laden und das $posts
-Array für ein besseres Ergebnis verwenden. :)
Ich habe den Originalcode erhalten, aber mit dem benutzerdefinierten Beitragstyp (ohne die Kategorien). Fügen Sie eine ausgeblendete Eingabe in Ihr Formular mit folgendem Beitragstyp ein:
<input type="hidden" name="post_type" value="fod_videos" />