0

I have a search suggestion box that appears when a user types in the search box. I want to close that box when the user clicks outside of the parent div. I tried this method below using .not() to omit the parents div but it did not omit it and still closes it when clicked on the parent div.

I have looked at solutions using event propagation but those have their own perils so I'd really like to use a simple function like .not() to accomplish this.

JS

// close search suggestions
    $("body").not('#searchbox').mousedown(function() {
        $('.search-suggestions').fadeOut();
    });

HTML

<section id="searchbox">
<div class="container">
<div class="row">
  <div class="col-md-12">
    <form class="form-inline clearfix">
      <div class="form-group pull-left">
        <input type="text" class="form-control" id="search-input" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default pull-right"><i class="fa fa-search"></i></button>
    </form>
  </div>
  <div class="col-md-12 search-suggestions">
    <ul class="list-unstyled">
      <li><h4>Browse:</h4></li>
      <li class="suggestion-new-homes"><a href="#"><span class="suggestion-result">result</span> in New Homes</a></li>
      <li class="suggestion-renovation"><a href="#"><span class="suggestion-result">result</span> in Renovation</a></li>
      <li class="suggestion-interior-living"><a href="#"><span class="suggestion-result">result</span> in Interior Living</a></li>
    </ul>
  </div>
</div>

Clinton Green
  • 9,697
  • 21
  • 68
  • 103
  • Thanks I found a working solution on the duplicate answer but I was keen to do this a simple way using a function like not( ) which makes sense. If anyone works out how to do that, please let me know. – Clinton Green Sep 18 '15 at 01:09

1 Answers1

1

Attach a click handler to the document when the search dropdown is open, remove it when closed. Prevent propagation of the click when user clicks inside the open dropdown.

Dane O'Connor
  • 75,180
  • 37
  • 119
  • 173
  • Thanks that does work but I was keen to accomplish this without event propagation. – Clinton Green Sep 18 '15 at 01:05
  • @ClintonGreen Why? This is exactly what it's designed for. Make sure you're not following some blanket 'event propagation is slow therefore bad' rule. – Dane O'Connor Sep 18 '15 at 02:10
  • I've read it can cause issues which I'd rather not deal with. I found a method that uses .closest( ) and works. – Clinton Green Sep 18 '15 at 02:47
  • @ClintonGreen `closest` is almost certainly not what you want. If I understand you correctly, you want the search box to dismiss when the user clicks anywhere outside of it. If you use closest it will only work if the user clicks near the results box in the DOM. Binding to the html document will allow the user to truly click anywhere to dismiss the results box. It's best practice to bind an event to the html document for this use case (despite what you might have read, this is a perfect leveraging of event bubbling). – Dane O'Connor Sep 18 '15 at 02:54