I have the following jQuery and HTML which hide the search result when the focus on the input has been lost.

This code hides my div with id #searchResult when the elements on #searchResult are clicked. I want to disable blur when elements on #searchResult div are clicked. Basically, I want to hide <div id="searchResult"> when the focus is lost and show when it's on focus. How can I achieve that?

$(document).on("blur", "#txtSearchTerm", function () {
    $('#searchResult').hide();
});

$(document).on("focus", "#txtSearchTerm", function () {
    $('#searchResult').show();
});

<script src=".9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="">
                <div class="title">Google</div>
                <div class="content">Click here</div>
            </a>
        </li>
        <li>
            <a href="">
               <div class="title">Google</div>
               <div class="content">Click here</div>
           </a>
        </li>
    </ul>
</div>

I have the following jQuery and HTML which hide the search result when the focus on the input has been lost.

This code hides my div with id #searchResult when the elements on #searchResult are clicked. I want to disable blur when elements on #searchResult div are clicked. Basically, I want to hide <div id="searchResult"> when the focus is lost and show when it's on focus. How can I achieve that?

$(document).on("blur", "#txtSearchTerm", function () {
    $('#searchResult').hide();
});

$(document).on("focus", "#txtSearchTerm", function () {
    $('#searchResult').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">Click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">Click here</div>
           </a>
        </li>
    </ul>
</div>

<div id="searchResult"> will be hidden on every click of elements inside it.

• javascript
• jquery
• html

• Maybe check the Jquery not selector – kevinSpaceyIsKeyserSöze Commented Oct 13, 2017 at 11:50
• I am confused how to use not on blur event. how can disable blur when clicked on <div id="searchResult">'s child – Kiran Shahi Commented Oct 13, 2017 at 11:53
• Possible duplicate of jQuery: fire click() before blur() event – Guillaume Georges Commented Oct 13, 2017 at 12:02

4 Answers 4

You can simply turn off your blur event with the following code.

$(document).off("blur", "#txtSearchTerm");

You dont need blur event to achieve that:

$(document).click(function(e) {
    if ($(e.target).is("div") && $(e.target).has("ul > li")){
        $('#searchResult').show()
    }
    else $('#searchResult').hide()
    
    if ($(e.target).is(':focus')){
        $('#searchResult').show()
    }
})

#searchResult{
    margin-top: 50px;
    border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
Click out the input to hide div
<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">click here</div>
           </a>
        </li>
    </ul>
</div>

You can't do that, because the blur is fired before the click on the child. So you would need to add an event handler on the document which closes the results. You cancel that event when someone clicks the results. Something like this:

$('#txtSearchTerm').click(function(e) {
  $('#searchResult').show();
  e.stopPropagation();
});

$(document).click(function(e) {
    $('#searchResult').hide();
});

$('#searchResult').click(function(e) {
  e.stopPropagation();
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">Click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">Click here</div>
           </a>
        </li>
    </ul>
</div>

My advise it to check relatedTarget and kill blur only if user clicks on certain elements.

$(document).on("blur", "#txtSearchTerm", function (e) {
  if ($(e.relatedTarget).hasClass("no-blur")){
  }else{
  $('#searchResult').hide();    
  }

});
$(document).on("focus", "#txtSearchTerm", function () {
    $('#searchResult').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">click here</div>
           </a>
        </li>
    </ul>
</div>