javascript - Hide search input field and search results when user clicks outside of them - Stack Overflow

admin管理员组

文章数量:1332881

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: /

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Dec 21, 2016 at 14:42 ritsrits 1,54477 gold badges3030 silver badges5050 bronze badges 2

• do you really need to click outside to hide ?. you can just use another button to hide them. – Vincent Dapiton Commented Dec 21, 2016 at 15:22
• I am converting a .psd to html/css. There is no close button. – rits Commented Dec 21, 2016 at 15:43

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

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

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/L4ne5r2w/

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.

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

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...

本文标签： javascriptHide search input field and search results when user clicks outside of themStack Overflow