Hi,
I am using a auto complete function to list down results according to a database field.
Here is the code:
HTML 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.
HTML Code:
<div class="suggestionsBox" id="suggestions_searchjob" style="display: none;">
                
                <div class="suggestionList" id="autoSuggestionsList_searchjob">
                    &nbsp;
                </div>
            </div>
This is the script which i have been using.
Code:
<script type="text/javascript">
    function lookup_search_job(txt_search_job_no) {
        //document.write(com_id);
        //document.write(txt_shipper);
        if(txt_search_job_no.length == 0) {
            // Hide the suggestion box.
            $('#suggestions_searchjob').hide();
        } else {
            $.post("rpc_searchjob.php", {queryString: ""+txt_search_job_no+""}, function(data){
                if(data.length >0) {
                    $('#suggestions_searchjob').show();
                    $('#autoSuggestionsList_searchjob').html(data);
                }
            });
        }
    } // lookup
    
    function fill_search_job(thisValue) {
        $('#txt_search_job_no').val(thisValue);
        setTimeout("$('#suggestions_searchjob').hide();", 200);
    }
</script>
This is the style which i used to for the division.
Code:
<style type="text/css">
    body {
        font-family: Helvetica;
        font-size: 11px;
        color: #333;
    }
    
    h3 {
        margin: 0px;
        padding: 0px;    
    }

    .suggestionsBox {
        position: absolute;
        left:100px;
        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;
        list-style:none;
    }
    
    .suggestionList li:hover {
        /*background-color: #659CD8;*/
    background-color: #69C;

    }
</style>
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....