hide div when click on form or focus on another control or press escape key...

Question

I am developing an web application. In this i provided a functionality means "autocomplete textbox". In this control, I need to show up 4 columns whenever user press keys in textbox, i need to collect these keys and send it to the service which will give us result as xml. then i convert xml to dataset and binded with datagird. for this i used jquery. after the result displayed ( i mean the result in datagrid which is placed in div), then i need to hide the div when the user clicks outside of the div or press escape key...

for this i used onblur event. but, when i click on the result then, i could not fire the click event for the div..

here is my jquery events...

function showList() {
        if(document.getElementById("txt1").value.length > 3) {
            $("#divList").hide("slow");
            $("#divLoading").show();
            $.ajax({
                    type : "POST",
                    url  : "ajaxServerPage.aspx?streetname=" + document.getElementById("txt1").value,                        
                    success : function(responseText) {  
                                $("#divLoading").hide();
                                $("#divList").show();                                  
                                $('#divList').html(responseText);  

                       //add button click events for buttons which are placed in table
                                $("#dataGridStreet .rowStyle").click(function(e) {
                                    //Open_ModifyPopup($(this).attr("id"));
                                    clickedRow($(this));
                                });                                          
                              }  // function(responseText)
            });


        }
    }

How should I do this?

Thanks

Answer 1

Why reinvent the wheel: How about using a plugin to do it for you?