Ajax realtime search. stop older requests, and do newer one only?

[shortysbest]

I have a search where it shows suggestions for friends to add, it works fine the only problem it loads slowly and returns wrong data (in the order that it would return as you type) because it  when you type each letter it sends a new search so what its doing is:

 

you type: D

sends query to database....then returns results for that query

you type: Dago

it sends query for D, then returns that, then it sends query for Da, then returns that, then sends query for Dag, then returns that, then sends query for Dago, then returns that.

how can i cancel the others so it's smooth and fast and doesn't return wrong data?

 

this is my code:

function search_suggestions()
{
var check_data = encodeURIComponent($(".search").val());
var search_val = check_data.replace(/^\s+|\s+$/g, '');
if(search_val&&search_val!=$(".search").attr('title'))
{

$(".search-suggestions").css({"display": "block"});
//$(".search-button").attr("href", "#/findfriends&find="+search_val);
$.ajax({
type: "POST",
url: "ajax/search_suggestion.php",
data: "search="+search_val,
cache: false,
success: function(html){
$(".search-suggestion-results").html(html);
}
});

}
else
{
$(".search-suggestions").css({"display": "none"});	
//$(".search-button").removeAttr("href");
}

}