如何使用Jquery检索wordpress的ajax搜索结果

我需要设置wordpress ajax搜索结果，但我的方法不是在单击按钮时检索结果而是将我重定向到另一个站点（myurl.com?s=term）。 我正确调用了admin-ajax.php但是设置错误。 是什么原因造成了这个问题？

//Script to activate ajax jQuery(document).ready(function($){ var search_val=$("#s").val(); $('#searchsubmit').click(function(){ $.post( WPaAjax.ajaxurl, { action : 'wpa56343_search', search_val : search_val }, function( response ) { $('#results').append( response ); } ); }); }); //function to setup wp_query add_action('wp_ajax_wpa56343_search', 'wpa56343_search'); 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( 'search-results' ); exit; } //html 
 
   
 
 
 

Answer 1

您应该将您的代码包装在document.ready

 $(document).ready(function(){ $("#searchsubmit").click(function(e){ e.preventDefault(); var search_val=$("#s").val(); $.post(search.php,{search_string:search_val},function(data){ if(data.length>0){ $("#results").html(data); } }); }); }); 

更新：

 $(document).ready(function(){ $("#searchsubmit").click(function(e){ e.preventDefault(); var search_val=$("#s").val(); $.ajax({ type:"POST", url: "./wp-admin/admin-ajax.php", data: { action:'wpa56343_search', search_string:search_val }, success:function(response){ $('#results').append(response); } }); }); }); 

在你的functions.php中

 add_action('wp_ajax_nopriv_wpa56343_search', 'wpa56343_search'); // for not logged in users add_action('wp_ajax_wpa56343_search', 'wpa56343_search'); function wpa56343_search() { // code } 

Answer 2

您也可以使用typeahead.js jquery插件，阅读完整的教程以获取更多信息：

http://wp.tutsplus.com/tutorials/plugins/enhancing-the-search-form-with-typeahead-js/