带有jQuery的搜索栏 [英] Search bar with jquery

问题描述

好的，所以我正在为一些朋友正在制作的娱乐套件编写UI.到目前为止，我有以下搜索栏:

Okay, so I'm writing a UI for an entertainment suite some friends are making. So far, I've got the following search bar:

(function($,c,b){$.map("click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup".split(" "),function(d){a(d)});a("focusin","focus"+b);a("focusout","blur"+b);$.addOutsideEvent=a;function a(g,e){e=e||g+b;var d=$(),h=g+"."+e+"-special-event";$.event.special[e]={setup:function(){d=d.add(this);if(d.length===1){$(c).bind(h,f)}},teardown:function(){d=d.not(this);if(d.length===0){$(c).unbind(h)}},add:function(i){var j=i.handler;i.handler=function(l,k){l.target=k;j.apply(this,arguments)}}};function f(i){$(d).each(function(){var j=$(this);if(this!==i.target&&!j.has(i.target).length){j.triggerHandler(e,[i.target])}})}}})(jQuery,document,"outside");

var clicked;

$( document ).ready( function () {
    clicked = false;
    $(".search").click( function () {
        if (clicked == false) {
            $(".search").toggleClass("active");
            clicked = true;
        } else {
            $(".search").bind( "clickoutside", function(event){
                $(".search").toggleClass("active");
                clicked = false;
            });
        }
    });
});

.search.active {
  background: rgba(0,0,0,0.4);
  width: 500px;
}

.search {
  margin-top: 25px;
  margin-right: 25px;
  background-color: #448aff;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: all 500ms ease;
}

.search > i {
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
  <i class="material-icons">search</i>
  <form>
    <input type="text" name="search"/>
  </form>
</div>

如您所见，它是不完整的.我正在使用此库: http://benalman.com/projects/jquery-outside-events-plugin/

As you can see, it's incomplete. I'm using this library: http://benalman.com/projects/jquery-outside-events-plugin/

，但效果不是很好.我想要的是当搜索栏展开时，输入表单事物在事物内部扩展.我还发现该插件不能很好地工作.当我单击页面上不是搜索栏本身的任何位置时，我需要它返回到其原始状态.有人可以帮我吗?我有点困惑.

and it's not working too well. What I want is for when the search bar expands, the input form thing expands inside of the thing. I also found that the plugin isn't working very well. I need it to return to it's original state when I click anywhere on the page that isn't the search bar itself. Can anybody help me out? I'm a bit confused.

推荐答案

无需使用外部插件即可实现外部点击功能，您可以自己实现.

There is no need to use a external plugin to achieve the click outside functionality, you can implement it yourself.

$(document).ready(function() {
  $(".search").click(function() {
    $(this).addClass("active");
  });
  $(document).click(function(e) {
    if (!$(e.target).closest(".search").length) { //another way to do this is to stop event propagation
      $(".search.active").removeClass('active');
    }
  });
});

.search.active {
  background: rgba(0, 0, 0, 0.4);
  width: 500px;
}
.search.active form {
  display: inline-block;
}
.search {
  margin-top: 25px;
  margin-right: 25px;
  background-color: #448aff;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: all 500ms ease;
}
.search > i {
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
  <i class="material-icons">search</i>
  <form>
    <input type="text" name="search" />
  </form>
</div>

这篇关于带有jQuery的搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！