Панель поиска с jquery

Question

Итак, я пишу пользовательский интерфейс для развлекательного пакета, который создают некоторые друзья. До сих пор, я получил следующий строку поиска:

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

\t \t <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/

и не работает слишком хорошо. Я хочу, чтобы, когда строка поиска расширяется, элемент формы ввода расширяется внутри вещи. Я также обнаружил, что плагин работает не очень хорошо. Мне нужно, чтобы он вернулся в исходное состояние, когда я нажимаю на странице, которая не является самой панелью поиска. Кто-нибудь может мне помочь? Я немного смущен.

Answer 1

Нет необходимости использовать внешний плагин для достижения внешних функций щелчка, вы можете реализовать его самостоятельно.

$(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>