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.