Advertise here

Mobile Friendly and Responsive Expanding Search Bar

June 26, 2013     24106     Mobile Responsive
Mobile Friendly and Responsive Expanding Search Bar

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

Summarized, this is what we want the search component to do:

  • Initially, we only want to show a button with a search icon.
  • When clicking on the icon, we want a text input to slide out.
  • The component should be fluid, meaning that we can use it in a responsive context.
  • For a smoother experience on touch devices, we’ll also want to add support for touch events.
  • When we type something we want to be able to submit the form by either hitting enter or clicking on the search icon.
  • If the input is expanded and empty, and we click on the search icon, we want the input to close again.
  • We also want the input to close when we click outside of the search bar, be it empty or not.

Related Plugins

Latest Plugins

Subscribe to Newsletter

Subscribe to email newsletter for latest jQuery plugins & tutorials.