Remove autosuggest text when clicking off field

Remove autosuggest text when clicking off field

I have just finished adding a search bar into my page. It pretty much all
works fine, however, I would like the autosuggestions to disappear after
clicking outside of the field. How would I do this? I am using HTML5 and
my codes are:
$(document) .ready(function() {
$('.autosuggest').keyup(function() {
var search_term = $(this).val();
$.post('search.php', {search_term:search_term}, function(data) {
$(".result").html(data);
$('.result li').click(function() {
var result_value = $(this).text();
$('.autosuggest').val(result_value);
$('.result').html('');
});
});
});
});
<input type="text" id="autosuggest" class="autosuggest"
onBlur="removeSuggestion();"> <input type="submit" value="search">
<div class="dropdown">
<ul class="result"></ul>
</div>
Not too sure my php is needed but just in case...
<?php
require_once 'connect.php';
if (isset($_POST['search_term']) == true && empty($_POST['search_term'])
== false) {
$search_term = mysql_real_escape_string($_POST['search_term']);
$query = mysql_query("SELECT town FROM `boroughs` WHERE town LIKE
'$search_term%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
echo '<li>', $row['town'], '</li>';
}
}
?>