使用ajax根据搜索显示结果？

Question

So currently, I have a php page which displays a list of results which it gets from my sql database. It displays the ID and the names.

I have a search at the top which just searches for keywords in the "name" field then if search is clicked it will take you to a new page which shows the results you have searched for.

What I am trying to do is to make it Asynchronous so when I search for lets say "London" it displays only results which have the keyword London in it, but on the same page.

My search button code:

    <input type="button" class="search" value= "Search">

Ajax code which I have tried using to make it asynchronous:

 $(document).ready(function() {
 $(".search").each(function() {
 var btn = $(this);
 btn.on("click", function(){
 $.post("searchresults.php",
 function(data){
 .append(data);}
 }}})

I'm new to this so apologies if it's a silly mistake. My searchresults.php just has the SELECT * FROM Property WHERE etc.. and then it echos the results.

Thanks.

Answer 1

You need to have some element on your page that'll hold the search results, e.g.

<div id="result"></div>

and then in your .post() call, you'd have a result handler that does

function (results) {
    $('#result').text(results);
}

Exactly how you actually insert/display the data is up to you - your PHP script could send over a full-blown html snipper, or a nice JSON-encoded data structure and your JS builds up the results, etc... This is just a simple brain-dead "here's some result data and display it as-is".