使用放大镜图标触发搜索

Question

我想做一个搜索表单，这样当用户单击一次时，搜索输入表单被切换，然后用户在表单中写下要搜索的内容，然后当用户再次单击搜索图标时，搜索应该被触发。然后，当用户第三次单击搜索图标时，表单将切换或消失。现在发生的事情是，当用户单击搜索图标时，搜索输入被切换，当用户按下enter时，搜索被切换。

当前代码是这样的：

$("#search_nav").click(function () {

$(this).siblings('input').toggle();
$search-button.click();
if(event.keyCode === 13){
   priceRange();
}
});

Answer 1

您可以使用.is(":visible") (https://api.jquery.com/visible-selector/)来确定要执行的操作，同时清除搜索内容，例如：

​

$("#search_nav").click(function() {

  var inp = $(this).siblings('input');
  if (!inp.is(":visible"))
    return inp.toggle().focus();  // or .show()
    
  var txt = inp.val();
  if (txt === "")
    return inp.toggle(); // or.hide()
    
  // clear input
  inp.val("");
  alert("searching for " + txt);
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='searchwrapper'>
  <button id='search_nav'>[Q]</button><!-- Q looks a bit like magnifier icon... -->
  <input id='search' placeholder="search" style='display:none;'>
</div>

​