Live search didn't disappear

[vizz]

Following code shows live search box. But it does not disappear when clicked on page anywhere or pressing escape key.
How to hide search result when clicked anywhere or pressed escape key?

index.html

<script type="text/javascript" src="jquery.js"></script>
</script>
$(document).ready(function(){
$(".search").keyup(function() 
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{}
else
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}return false; 
});
});
</script>

<div id="jquery-live-search">
<form method="post" action="Search.php">

    <p>
        <label>
            Enter search terms<br />
            <input type="text" class="search" id="searchbox"  name="searchword"/>
			<div id="display">
			</div>
        </label> 
		<input type="submit" value="Go" />
    </p>

</form>
</div>

search.php

if($_POST)
{
$q=$_POST['searchword'];
$sql_res=
mysql_query("select * from members where firstname like '%$q%' or lastname like '%$q%' order by member_id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$fname=$row['firstname'];
$lname=$row['lastname'];
$img=$row['img'];
$country=$row['country'];
$re_fname='<b>'.$q.'</b>';
$re_lname='<b>'.$q.'</b>';
$final_fname = str_ireplace($q, $re_fname, $fname);
$final_lname = str_ireplace($q, $re_lname, $lname);

?>
<div class="display_box" align="left">
<img src="user_img/
<?php echo $img; ?>" />
<?php echo $final_fname; ?>&nbsp;
<?php echo $final_lname; ?><br/>
<?php echo $country; ?>
</div>
<?php
}
}
else
{}
?>

CSS

*{margin:0px}
#searchbox
{
width:250px;
border:solid 1px #000;
padding:3px;
}
#display
{
width:250px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{
padding:4px; 
border-top:solid 1px #dedede; 
font-size:12px; 
height:30px;
}
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}

[gotboots]

you need to put the form that you want to disappear in the div that will show the results.
At the moment, you have this for example:

form start
form end
div start
display results if searched else nothing
div end

so the div is changing as you have told the browser too, but the form is still on the outside so it wont disappear.

you want this:

div start
form start
form end
display results if searched
div end

that way when it has a search, it will disappear as the div content changes to your requested info

[diafol]

How to hide search result when clicked anywhere or pressed escape key?

You could place the search result in a js popup dialog (jqueryui). I think ESC would close the popup.

[mschroeder]

For starters this is not a PHP issue, this is a javascript issue.

On that note it appears you are using jQuery already. So you can add a couple listeners for the escape key press, any mouse click, and also if the search loses focus.

$(document).keypress(function(e) { 
    if (e.which == 27) {
          if( $('#id_of_element').is(':visible') ){
              $('#id_of_element').hide();
          }
    }
});

$('#id_of_input_element').focusout(function(){
    if( $('#id_of_element').is(':visible') ){
         $('#id_of_element').hide();
    }
});

$(document).mouseup(function(){
    if( $('#id_of_element').is(':visible') ){
         $('#id_of_element').hide();
    }
});

This isn't tested by should give you a good starting point.