javascript - How to Create a Customized Search Function for Shortcut -

goal:
when click on button icon reading-glass a, text field should entering right left.

after have pressed button, cursor should located in text field , ready retrieve input data , color frame around button instance yellow should appear.

when use curser outside of text field , suddently press left button of mouse, text field , yellow color around button should disappear.

problem:
not how create it.

info:
*i'm using bootstrap , jquery.
*today, not have available sourcecode.

what need 2 actions on button:

1. show input field
2. fire form

the code below that. input have 0 width on page load. jquery functions binds click event on button.

when it's clicked if input field has width. when not, prevent default action (submitting form), , instead animates input width of 200px. after focuses on field.

the second time click on button, input won't have 0 width, buttons acts normal , submit form.

hope suits you.

$(function() {      $('#search-form button').on('click', function(e) {          var btn = $(this);          var inp = $(this).parent().find("input");                    if( inp.width() == 0 ) {              e.preventdefault();              inp.animate({width: "200px"}, 500).focus();                      btn.addclass('active-btn');          }      });  });

* {      box-sizing: border-box;  }  body {      background: black;  }  #search-form input {      color: #fff;      height: 50px;      background: #484848;      border: 0;      float: right;      width: 0;  }  #search-form button {      background: #484848;      color: #fff;      width: 50px;      height: 50px;      border: 1px solid #484848;      float: right;  }  #search-form .active-btn {      border: 1px solid #57abd9;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form id="search-form">      <button type="submit">&#128270;</button><input type="text" name="search" />  </form>