Jak używać Jquery do pobierania wyników wyszukiwania ajax dla wordpress

Question

Potrzebuję ustawić wyniki wyszukiwania wordpress ajax, ale moja metoda nie pobiera wyników po kliknięciu przycisku i zamiast tego przekierowuje mnie do innej witryny (myurl.com? s = wyrażenie). Nazwałem poprawnie admin-ajax.php, ale ustawiłem to niepoprawnie. Jakieś pomysły, które powodują problem?

//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

Należy owinąć kod w 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); 
      } 
     }); 
    }); 
}); 

Aktualizacja:

$(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); 
      } 
    }); 
}); 

W swojej 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

Można użyć wtyczki typeahead.js jquery też przeczytać ten kompletny poradnik aby uzyskać więcej informacji:

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