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.

Website Demo