title: Append input text field for search function jquery
body: <p>I have the following jquery code right now. 
  This is meant to be a search function eventually, right now i got my animation, but i am yet to add an input text field to the function that i can use for my C# code for the search function. This should emerge after the border expands and dissapear when the user clicks on the html, just like the script does to the border. </p>
  
  <pre><code>    $(function () {
          var search = $("#search");
  
          search.click(function () {
              search.attr("src", "Icons/magnifier.png").css({ "border": "2px", "border-style": "solid", "border-color": "#808080", "padding-left": "130px", "transition": "all 500ms" });
          });
          $('html').click(function (e) {
              if (e.target.id != 'search') {
                  $("#search").attr("src", "Icons/magnifier2.png");
                  $("#search").removeAttr('style');;
              }
          });
      })
  </code></pre>
  
  <p>I guess i have to make an appendto function, but im still unsure how to create it in such a way that when the user press enter it fires the search function. </p>
  
  <p>Right now however, i just want to create the textfield, so that it can be used in the further process. </p>
  
  <p><a href="https://jsfiddle.net/ymzzpLdd/" rel="nofollow">https://jsfiddle.net/ymzzpLdd/</a></p>