jQuery - Comment masquer la liste déroulante des résultats de recherche?

Question

Je suis en train de faire une barre utilisateur de recherche comme celui de facebook (il consiste en une zone d'entrée et une baisse dynamique dans la liste déroulante des résultats)

mais je vais avoir des problèmes à se cacher dans la liste déroulante des résultats liste quand je clique dans une autre zone.

le code html est quelque chose comme ceci:

<div id="search_container"> 
    <input id="search_imput" type="text" autocomplete="off"> 
    <ul id="search_result_list"> 
    <li>result 1</li> 
    <li>result 2</li> 
    <li>result 3</li> 
    </ul> 
</div> 

et le code jquery près ceci:

$('#search_imput').click(function(){ 
    //update_search_result_list(); 
    $('#search_result_list').show();  
}); 

$('#search_container').focusout(function(){ 
    $('#search_result_list').hide(); 
}); 

$('#search_result_list').children('li').click(function(){ 
    //display_selected_user_info(); 
    alert(($(this).text()); 
}); 

mais il ne déclenche pas la display_selected_user_info();

Le principal problème est que le focus #search_container est déclenché avant que le clic $('#search_result_list').children('li') ne soit activé, ce qui fait disparaître l'élément li b La fonction click li est alors activée.

---

Note: Je l'ai placé un exemple était u peut tester here.

Answer 1

Je trouve enfin comment faire. (après beaucoup de recherche)

Fondamentalement, je peux utiliser l'événement click de document et le event.trigger pour vérifier si je clique ou non dans ma liste de résultats.

// remove the $('#search_container').focusout and use this one: 
$(document).unbind('click'); 
$(document).click(function(event){ 
    if($(event.target).closest('#search_container').length == 0) { 
    $('#search_result_list').hide(); 
    } 
}); 

J'ai mis la version complète de mon exemple here

Answer 2

ÉDITÉE

$('#search_imput').click(function(){ 
    //update_search_result_list(); 
    $(this).find('#search_result_list').children('li').show();  
}); 

$('#search_container').unbind().bind('blur',function(){ 
    $(this).find('#search_result_list').children('li').hide(); 
}); 

$('#search_result_list').children('li').die().live('click',function(){ 
    display_selected_user_info(); 
}); 

Answer 3

est ur liste générée dynamiquement? si oui essayer den fonction en direct pour détecter de nouveaux li ajouté à dom et jquery pour dis est:

$('#search_result_list li').live('click', function(){ 
    display_selected_user_info(); 
}); 

Answer 4

J'ai trouvé un travail simple autour de ce problème. Vous pouvez introduire un délai avant que la liste de résultats ne se cache, de sorte que l'événement click aura le temps de se déclencher.

$('#search_imput').blur(function() { 
    setTimeout(function(){ 
     $('#search_result_list').hide(); 
    }, 100); 
}); 

Voir la version mise à jour: http://jsfiddle.net/5FRar/1/