views:

43

answers:

0

I have an input field in a form. On 'keyup' I display a suggestion list (like many search boxes). The results in the suggestionbox are clickable.

Now I want to hide the suggestion list when I click anywhere but the list, but the single suggestions still have to be responsive.

In another thread/question I read the answer to use stopPropagation() in the element I don't want to hide after clicking anywhere but the box. But using that function also prevents the click on the element

This was my try

jQuery(function(){

    $(document).click(function(){
      $("#box").empty();
    });

   $("#box li").live('click', function(e) {
     e.preventDefault(); 
     $("#form :text").val($(this).text()); 
     $("#box li").slideToggle();
     doSomething();
   });


    $("#form :text").keyup(function(){
      if($("#form :text").val().length>0){
        suggestSomething();
       }
     });
});