View Full Version : how to exit from a auto complete

30 May 2011, 2:06 AM
I am using a auto complete function to list down results according to a database field.
Here is the code:
<input name="txt_search_job_no" type="text" id="txt_search_job_no" value="" style="border:0px; font-family:Tahoma, Geneva, sans-serif; font-size:8.5pt; width:175px;" maxlength="100" onkeyup="lookup_search_job(this.value);" onblur="fill_search_job();" autocomplete="off"/>
And i list down a division to display the results.
<div class="suggestionsBox" id="suggestions_searchjob" style="display: none;">

<div class="suggestionList" id="autoSuggestionsList_searchjob">

This is the script which i have been using.
<script type="text/javascript">
function lookup_search_job(txt_search_job_no) {
if(txt_search_job_no.length == 0) {
// Hide the suggestion box.
} else {
$.post("rpc_searchjob.php", {queryString: ""+txt_search_job_no+""}, function(data){
if(data.length >0) {
} // lookup

function fill_search_job(thisValue) {
setTimeout("$('#suggestions_searchjob').hide();", 200);
This is the style which i used to for the division.
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #333;

h3 {
margin: 0px;
padding: 0px;

.suggestionsBox {
position: absolute;
margin: 5px 0px 0px 0px;
width: 200px;
background-color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 0px solid #09F;


.suggestionList {
margin: 0px;
padding: 0px;

.suggestionList li {

margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;

.suggestionList li:hover {
/*background-color: #659CD8;*/
background-color: #69C;


Once i type on the search box, it will display related data on that division.So if i dont any data from the search i can type.I need to close the division when mouse out from that division.
So can anyone help me to figure this out???

Thanks in advance....