CODEWITHSUNDEEP
javascriptjqueryhtmlcss
rits
rits

Reputation: 1544

Hide search input field and search results when user clicks outside of them

How to hide both the input field and the search results box when user clicks outside of them?

Currently if you hover your mouse over #search-btn both #search-container and #search-results will appear. If you click anywhere except on #search-container both will disappear.

I want so that I can click on #search-results without both of them disappearing.

Fiddle: https://jsfiddle.net/emils/d2sn7q6L/

HTML:

<div id="search-container">
  <form id="search-form">
    <input id="search" type="search">
  </form>
</div> <!-- End search-box -->

<a id="search-btn" class="search-icon" href="#">search</a>

<div id="search-results"></div> <!-- End search-results -->

JS: 

var searchInput = $("#search-container");
var searchResults = $("#search-results");

var showSearchInput = function() {
  searchInput.show();
  searchResults.show();
  if(searchInput.is(":visible")) {
    $("#search").focus();
  }
};
$("#search-btn").hover(showSearchInput);

searchInput.focusout(function(e) {
  searchInput.hide();
  searchResults.hide();
});

Upvotes: 5

Views: 4463

Answers (5)

Amir F.
Amir F.

Reputation: 11

// Hide search result when clicked outside search field
let searchInput = $(".search-container");
let searchResults = $(".search-result");
    
$(document).click(function(e) {
  if ($(e.target).closest(".search-container, .search-result").length == 0) {
    searchInput.show();
    searchResults.hide();
  } else {
    searchResults.show();
  }
});

Upvotes: 1

Danny Drinkwater
Danny Drinkwater

Reputation: 41

Try replacing your searchInput.focusout function with:

$(document).on('click', function (e) {
    if($(e.target).attr('id') != "search-results") {
        searchInput.hide();
        searchResults.hide();
    }
});

This way you're only performing the action when a user clicks on anything except for the searchResults element.

Upvotes: 1

J. Aguilar
J. Aguilar

Reputation: 41

what about replacing and using $(document) and .is("hover") and check if any of the elements are hovered when the elements have the mouse on, we can guess that if the document has been clicked and in that moment any of the elements have the mouse on then any of the element were actually clicked, so it will look like this:

$(document).click(function(){ //if the document has been clicked
if( !($("#search-container").is(":hover"))&&
    !($("#search-results").is(":hover"))&&
    !($("#search-btn").is(":hover"))
   )//if any of these elements have the mouse then me know the user didn't click on them
{searchInput.hide();searchResults.hide();}}//hide the boxes

i hope this helps you, here are the changes

Upvotes: 1

Robba
Robba

Reputation: 8324

Have you tried hiding not on focusout, but on document click and then excluding clicks on the form or search results.

$(document).click(function(evt) {
  if ($(evt.target).closest('#search-container, #search-results').length == 0) {
    searchInput.hide();
    searchResults.hide();
  }
});

See modified fiddle: https://jsfiddle.net/L4ne5r2w/

Upvotes: 1

Alex N.
Alex N.

Reputation: 56

Although I don't like an idea to hide search field ;) it may be needed by your project and in example above using .on("focusout", function ... does the job. As optimisation I would suggest wrapping them in a kind of container not to call show() and hide() twice per iteration at least...

Upvotes: 0

Related Questions