How to use Jquery to retrieve ajax search results for wordpress
You should wrap your code in 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); } }); }); });
Update:
$(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); } }); }); });
In your functions.php
add_action('wp_ajax_nopriv_wpa56343_search', 'wpa56343_search'); // for not logged in usersadd_action('wp_ajax_wpa56343_search', 'wpa56343_search');function wpa56343_search(){ // code}
You can use the typeahead.js jquery plugin too, read this complete tutorial for more information:
http://wp.tutsplus.com/tutorials/plugins/enhancing-the-search-form-with-typeahead-js/