title: how can I create a search box like Facebook's or WhatsApp's? (Mobile)
body: <p>Is there a way to do that manually ? I was trying to use <code>Ionic Framework</code>, they had an <code>attribute</code> for that but is deprecated now.</p>
  
  <p>By Facebook's/WhatsApp's search box I mean:</p>
  
  <p>1 - Hidden at first sigh</p>
  
  <p>2 - If you want to see it you have to pull down</p>
  
  <p>3 - Once you focus on it, it extends up to the top of the screen and overlaps the header</p>
  
  <p>4 - Has a button which is an X to delete the content of the search box and other button named "Cancel" to close the search box. </p>
  
  <p>Pretty sure everyone has notice that behavior already.</p>
  
  <p>So, what are the techniques to implement it ?</p>
  
  <p>I am using Angular so I do not know if there is a way to do a Directive, or just with css ? what are your suggestions ?</p>
  
  <p><img src="https://i.stack.imgur.com/Annn3.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/Ps02U.jpg" alt="enter image description here"></p>
  
  <p><a href="http://codepen.io/maketroli/pen/pvpPxz" rel="nofollow noreferrer">something like this</a></p>