当用户在其外部点击时隐藏搜索输入字段和搜索结果

时间:2016-12-21 14:42:28

标签: javascript jquery html css

当用户点击输入字段和搜索结果框外,如何隐藏输入字段和搜索结果框?

目前,如果您将鼠标悬停在#search-btn上,则#search-container#search-results都会出现。如果您点击#search-container以外的任何地方,则两者都会消失。

我希望我可以点击#search-results,而不会消失它们。

小提琴: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();
});

4 个答案:

答案 0 :(得分:1)

您是否尝试过隐藏焦点,而是单击文档,然后排除表单或搜索结果上的点击。

 "phones before add: [{"Phone":"123456789"}]", 
  "phones after add: [{"Phone":"123456789"},{"Phone":"0"}]", 
  "phones before add: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
  "phones after add: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"1"}]", 
  "phones before delete: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"1"}]", 
  "phones after delete: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
  "phones before add: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
  "phones after add: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"2"}]", 
  "phones before add: [{"Phone":"123456"},{"Phone":"4567890"},{"Phone":"2"}]", 
  "phones after add: [{"Phone":"123456"},{"Phone":"4567890"},{"Phone":"2"},{"Phone":"3"}]", 
  "phones before add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"}]", 
  "phones after add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"},{"Phone":"4"}]", 
  "phones before delete: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"},{"Phone":"4"}]"
  "phones after delete: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"4"}]", 
  "phones before add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"47890"},{"Phone":"4"}]", 
  "phones after add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"47890"},{"Phone":"4"},{"Phone":"5"}]"

请参见修改过的小提琴:https://jsfiddle.net/L4ne5r2w/

答案 1 :(得分:1)

尝试用

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

这样,您只需在用户点击除 searchResults 元素之外的任何内容时执行操作。

答案 2 :(得分:1)

如何更换和使用$(document)和.is(“hover”)并检查元素是否有鼠标悬停时是否有任何元素,我们可以猜测如果文档已被点击并且在当任何元素都有鼠标时,任何元素实际上都被点击了,所以它看起来像这样:

y['zonename'] = y['zonename'].str.replace('[!|@|#|$|%|&|*]', '')
y['polygonstring'] = y['polygonstring'].str.replace(' +', ' ')
y['polygonstring'] = y['polygonstring'].str.replace(' ,', ', ').str.lstrip()

我希望这可以帮助你,here are the changes

答案 3 :(得分:0)

虽然我不喜欢隐藏搜索字段的想法;)您的项目可能需要它,在上面的示例中使用.on("focusout", function ...完成工作。作为优化,我建议将它们包装在一种容器中,至少每次迭代都不要调用show()和hide()两次......