フォーカスが入力にない場合、検索結果を非表示にします。

Question

フォーカスが検索入力にない場合、検索結果を非表示にしようとしています。私は.keyup()機能の後に.blur()を使って簡単にそれを行うことができます。私の問題は、ユーザーが検索結果をクリックしたときに...まだ隠れていることです。

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

だから、私は、検索結果に焦点を当てていないユーザーがテキスト入力とユーザーからフォーカスを削除するので、もしそれを作りたいだけ div

HTMLを隠します

JSFiddle Demo

Answer 1

を使用して、単純なアドオン複数のイベント件のイベントハンドラ

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

あなたのイベントは、あなたの結果

DEMO

を示す実行される機能をクリックするか、keyUpイベントれる時間要素によって、この

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

この方法のようになります

ホープこれはあなたを助ける