[SOLUCIONADO] Hacer desaparecer un div cuando ocurran dos 2 cosas

DandyCC · #1 (**permalink**) 26/11/2013, 06:10

Hola a todos.
Tengo un problemilla que no soy capaz de resolver. Os resumo, estoy implementando una búsqueda de usuarios para una web. Al introducir cualquier caracter en un input text muestro un div con los resultados de la búsqueda. El div no tiene altura definida, por lo que para que desaparezca simplemente vacío el div de contenido con $(".busqueda").html(""), aunque podría hacerlo con un slideup o algún efecto del estilo. Eso da igual.

El problema viene cuando tengo que definir cuando hacer desaparecer el div. Quiero que desaparezca cuando el usuario pinche sobre cualquier elemento que no sea ni el input de la busqueda ni ninguno de los resultados. Para lo primero es facil con focusout. ¿Y para lo segundo? Porque tal y como está ahora mismo, si el usuario pincha sobre cualquier elemento de la búsqueda pero no levanta el dedo del ratón, el div desaparece. Puedo conseguir un efecto parecido al que quiero con un timeout al focusout del input de búsqueda pero queda muy cutre.

Para que os hagais una idea, busco un funcionamiento como el que tienen facebook o twitter en sus motores de búsquedas internos.

Muchas gracias.

America|UNK · #2 (**permalink**) 26/11/2013, 11:48

Código javascript:

Ver original<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
    var result = $("#result");
 
    $("#search").keyup(function(){
        result["slide" + ($(this).val().length >= 2 ? "Down" : "Up")]();
    });
    
    //es un tipo de simulación de "blur" de cualquier objeto
    //si el objeto clickeado no contiene clase no_cerrar, el DIV desaparece (slideUp)
    
    $(document).click(function(e){ 
        //objeto clickeado
        var el = $(e.target), 
        //si el objeto que lo contiene tambien tiene la clase .no_cerrar
        padre = el.parents(".no_cerrar"), 
        //solo mostrar si hay resultados (un ejemplo)
        aparece = $("#search").val().length >= 2 ? true : false;
        
        result["slide" + (aparece && ($(e.target).hasClass("no_cerrar") || padre.length > 0) ? "Down" : "Up")](); 
    });
 
});
</script>
 
<style>
.b { height:26px}
ul {margin:0;padding:0}
.b, #result {width:200px; border:1px solid #000;}
#result {background:black; color:#fff; display:none}
li {width:100%; line-height:26px; text-align:center; border-top:1px solid #666}
input {width:100%; height:100%}
</style>
<body>
<b>test </b> <span>test objeto</span>
<div class="b"><input type="text" id="search" placeholder="Escribe 2 letras" class="no_cerrar" /></div>
<ul id="result" class="no_cerrar">
    <li>Result 1</li>
    <li>Result 2</li>
    <li>Result 3</li>
</ul>
</body>
</html>

DandyCC · #3 (**permalink**) 26/11/2013, 13:18

Funciona justo como quería. Mil gracias!!!!