February 4, 2016 | 14 Feedbacks

Advanced Search Form

A search form with advanced filtering options and quick link suggestions.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Getting the search experience right is never an easy task. The starting point is always the search form, which, in most cases, consists only of an input field plus a submit button. The search results page can be tricky to design, in particular if you have different content categories.

For big websites and online stores, what is crucial though is to try to anticipate a user’s move. We have to take into account that often our users are not clear about where to find specific information on our website. In those cases they tend to turn to the search form. Providing filtering options and quick links upfront is a way to narrow the search experience to what the user is really interested in, as well as a way to build simpler, more focused search result pages.

Here is a quick animation that shows our advanced search form in action:


Creating the structure

The HTML structure is composed by three main elements: a <header> element, wrapping the main navigation, a for the search form and a for the page main content.

Adding style

On small devices (viewport width smaller than 1024px), the main navigation and the search form are on the right side, hidden by default; when a user clicks the menu icon, the <main> and <header> elements translate to the left (nav-is-visible class is applied) to reveal the navigation.

On bigger devices, the search form is on top of the main navigation, hidden by default. When a user clicks the .cd-search-trigger element, the .is-visible class is used to reveal the form.

To trigger the search form animation, we use the .animate-search class added to the <header> element. This class triggers two different CSS3 Animations: cd-slide-in (for the search form) and cd-3d-rotation (for the suggestions dropdown).

If you prefer a basic fade-in effect (rather than animating the search form), you can remove the .animate-search class from the <header> element.

About the category selection: to make sure the width changes according to the option the user chooses, the <select> element is in absolute position (so it doesn’t take space), while a span.selected-value is used to show the option selected (its text is changed  when the user selects a new option using jQuery).

Events handling

In the starting HTML structure, the navigation is inside the <header>. On small devices, we wanted the navigation to be on the side, hidden by default, and it was easier for us to have it outside the <header>. So we use jQuery to do that.
We do the same for the by default, it’s outside the main navigation, while on small devices we move it inside the element.

Besides, we used jQuery to detect click events and add/remove classes accordingly and to change the span.selected-value text when user selects a different option from the <select> dropdown.


Feb 4, 2016
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.