如何使用jquery檢索wordpress的ajax搜索結果

Question

我需要設置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 

    <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 id="results"></div> 

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(data){ 
       $('#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/