Скрыть результат поиска, если фокус не на входе

Question

Я пытаюсь скрыть результаты поиска, если фокус не находится на входе поиска. Я могу сделать это легко, используя .blur() после функции .keyup(). Моя проблема в том, что когда пользователь нажимает на результат поиска ... он все еще скрывается. Итак, я хочу сделать так, если пользователь удаляет фокус из текстового ввода и пользователь не фокусируется на результатах поиска, то только скрыть 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

Просто простые оных несколько событий с помощью on обработчики событий

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

Ваше мероприятие будет как этот

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

Таким образом, к тому времени элемента нажмите или KeyUp функции будет выполняться, который показан ваш результат

DEMO

Надеюсь, это поможет вам