jQuery扩展搜索图标输入，不太有效

jQuery expanding search icon input, not quite working

本文关键字：有效 输入 图标 扩展 搜索 搜索图 jQuery      更新时间：2023-09-26

到目前为止，我有一个搜索框，但对JS来说是新的，所以有点卡住了。

我需要它向右滑动以显示它后面的输入，当我只使用按钮时它确实有效，但我想

我需要只添加图标，所以当你点击它时没有提交而是滑动，但然后我想还需要显示按钮，当你在输入中输入一些东西时图标隐藏，如果没有，当你点击图标时会关闭再。

我猜有点像这样...http://codepen.io/nikhil/pen/qcyGF - 这就是我一直试图建立的基础。

searchExpand = function(elm){
  var spanIcon = $('.span-icon'),
  searchInput = $('.search-input'),
  searchForm = $('.search-form'),
  btnSearch = $('.btn-search'),
  isOpen = false;
  if(isOpen == false){
    searchForm.addClass('open');
    spanIcon.hide();
    btnSearch.show();
    searchInput.focus();
    isOpen = true;
  } else {
    searchForm.removeClass('open');
    btnSearch.hide();
    spanIcon.show();
    searchInput.focusout();
    isOpen = false;
  }
}
$(document).ready(function(){
  
  // lets make the search feature happen!
  $(document).on("click", "span.btn-search", function() {
    searchExpand(this);
  });
});
.search-form {
  width: 0%;
}
.search-form input {
  border-right-style: none;
}
.search-form button {
  background: none;
  padding: 0;
  display: none;
}
.search-form button i {
  font-size: 1.9em;
  color: #000;
  padding: 10px;
}
.search-form span.search-icon {
  font-size: 1.9em;
  color: #000;
  padding: 10px;
  cursor: pointer;
}
.search-form .form-control {
  padding: 0;
  border: 0;
}
.search-form .input-group-addon {
  background: #fff;
  border: 0;
}
.search-form.open {
  width: 100%;
}
.search-form.open .form-control {
  padding: 30px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<form role="search" class="search-form">
  <div class="input-group add-on">
    <input type="text" class="form-control search-input" placeholder="Enter a search term" name="search" id="search">
    <div class="input-group-addon">
      <button class="btn btn-clear btn-search" type="submit"><i class="glyphicon glyphicon-search search-icon"></i></button>
      <span class="span-icon glyphicon glyphicon-search search-icon"></span>
    </div>
  </div>
</form>

请注意，您的 .btn-search 不在跨度内，因此您的函数 searchExpand 将不会运行。 当您单击按钮时。

跨度

中的内容是"跨度图标字形...'"

如果你正在使用jquery，这将是实现你想要的有效方法：

为跨度分配一个 ID，随心所欲地称呼它，并更改您的 js 以反映： 

 $( "#yourbuttonidname" ).click(function() {
    searchExpand(this);
  });

新跨度示例：

<span id="yourbuttonidname" class="span-icon glyphicon glyphicon-search search-icon"></span>
相关文章：