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();
}
});
});