我正在尝试在我的页面上加载搜索结果,而无需重新加载。我已经尝试了多种方法,但仍然无法实现,尽管使用了其他人确认的解决方案。
请查找以下代码:
搜索帖子结果。php(在includes文件夹中)
<?php
/* Template Name: Search Post Results */
?>
<div class="contentarea">
<div id="content" class="content_right">
<h3>Search Result for : <?php echo "$s"; ?> </h3>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="posts">
<article>
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h4>
</article>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
功能。php
add_action(\'wp_ajax_nopriv_wpa56343_search\', \'wpa56343_search\',100);
add_action(\'wp_ajax_wpa56343_search\', \'wpa56343_search\',100);
function wpa56343_search()
{
global $wp_query;
$search = $_POST[\'search_val\'];
$args = array(
\'s\' => $search,
\'posts_per_page\' => 5
);
$wp_query = new WP_Query($args);
get_template_part(\'includes/search-post-results\');
exit;
}
HTML表单
<div id="my_search">
<form role="search" method="get" id="searchform" >
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div>
jQuery
<script>
jQuery(document).ready(function () {
jQuery("#searchsubmit").click(function (e) {
e.preventDefault();
var search_val = jQuery("#s").val();
jQuery.post(
"<?php echo admin_url(\'admin-ajax.php\'); ?>", {
action:\'wpa56343_search\',
search_string:search_val
}, function (response) {
jQuery(\'body\').append(response);
}
}
});
});
</script>
使用我的模板,而不是在同一页上获得结果,我只需转到url/s=search\\u val并加载默认搜索结果模板。
谢谢你的帮助。
E: 缓慢前进。使用上述代码后,我得到的错误是未捕获引用错误:未定义wpa56343\\u搜索。
最合适的回答,由SO网友:TheDeadMedic 整理而成
JavaScript应为:
<script>
jQuery( document ).ready(function ( $ ) {
$( "#searchform" ).on( "submit", function ( ev ) {
ev.preventDefault();
$.post(
"<?php echo admin_url( \'admin-ajax.php\' ) ?>",
{
action: "wpa56343_search",
search: $( "#s" ).val()
},
function ( response ) {
$( "body" ).append( response );
}
);
});
});
</script>
以及
functions.php
应为:
function wpa56343_search() {
if ( ! isset( $_POST[\'search\'] ) )
exit;
query_posts(
array(
\'posts_per_page\' => 5,
\'no_found_rows\' => true,
\'post_type\' => get_post_types( array( \'public\' => true ) ),
\'s\' => wp_unslash( ( string ) $_POST[\'search\'] ),
)
);
get_template_part( \'includes/search-post-results\' );
exit;
}
add_action( \'wp_ajax_nopriv_wpa56343_search\', \'wpa56343_search\', 100 );
add_action( \'wp_ajax_wpa56343_search\', \'wpa56343_search\', 100 );
通常,您应该避免
query_posts
, 但在这种情况下,它是完全有效的,因为我们正在为
search-post-results.php
使用。