Suchergebnis ausblenden, wenn der Fokus nicht auf Eingabe liegt

Question

Ich versuche, Suchergebnisse zu verbergen, wenn der Fokus nicht auf der Sucheingabe liegt. Ich kann das leicht tun, indem ich nach der .keyup() Funktion verwende. Mein Problem ist, dass, wenn ein Benutzer auf das Suchergebnis klickt ... es verbirgt sich immer noch. Also, ich möchte es machen, damit, wenn der Benutzer den Fokus von der Texteingabe entfernt und Benutzer konzentriert sich nicht auf Suchergebnis dann verstecken nur die div

HTML:

<form role="search" autocomplete="off"> 
    <div> 
    <input id="searchInput" type="text" placeholder="Search"> 
    </div> 
    <div class="search_main"> 
    <div id="sresult" tabindex="0"></div> 
    </div> 
</form> 

jQuery:

$("#searchInput").keyup(function(e) { 
    var q = $(this).val(); 
    if (q !== undefined && q.length > 0) { 
    $("#sresult").show(150); 
    $("#sresult").html("No results"); 
    } else { 
    $("#sresult").hide(150); 
    } 
}).blur(function(e) { 
    $("#sresult").hide(150); 
}); 

JSFiddle Demo

Answer 1

Gerade einfaches Add mehrere Ereignissemit EreignisHandler

element.on('event1 event2 etc...') 

Ihre Veranstaltung wäre wie dieser

$("#searchInput").on('keyup click',function(e) { 
    var q = $(this).val(); 
    if (q !== undefined && q.length > 0) { 
     $("#sresult").show(150); 
     $("#sresult").html("No results"); 
    } else { 
     $("#sresult").hide(150); 
    } 
}).blur(function(e) { 
    $("#sresult").hide(150); 
}); 

diese Weise durch die Zeit Element klicken oder die Funktion keyUp wird Ihr Ergebnis gezeigt ausgeführt werden, die

DEMO

Ich hoffe, dies hilft Ihnen