How to use Jquery to retrieve ajax search results for wordpress How to use Jquery to retrieve ajax search results for wordpress wordpress wordpress

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/