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>