advanced-search
February 4, 2016 | 15 Feedbacks

Advanced Search Form

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

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:

advanced-search-animation

Creating the structure

The HTML structure is composed by three main elements: a <header> element, wrapping the main navigation, a div.cd-main-search for the search form and a main.cd-main-content 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 div.cd-select 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 div.cd-main-search: by default, it’s outside the main navigation, while on small devices we move it inside the nav.cd-main-nav-wrapper 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.

Changelog

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.

  • Abdul Razak

    Awesome work Sebastiano

    • http://codyhouse.co/ Sebastiano Guerriero

      thanks :)

  • Luisma Benítez

    Good job, just awesome.

  • http://screenfluence.com Matt Silva

    Just discovered CodyHouse and I’m in love!

    Keep up the great work ♥

    • http://codyhouse.co Claudia Romano

      Thanks Matt! :)

  • http://viaforge.com David Norris

    Very elegant and user friendly! Nice work!!!

  • bikashtheadmin

    This is awesome !! some styling for category select would have been more nice !!

  • KaosNihil

    Very nice! thanks!

  • Frederico Graça

    Looks very nice! congrats

  • Chồng Hiền

    Thanks very much . if you build muti level menu very good

  • Benevides Lecontes

    Nice work. Would be nice if this advanced search were fired on input focus/click/blur instead of button

  • Diki Dolkar
  • pete preston

    Wow! Super awesome advance search parameters.

  • Miho

    Is this can be used in WordPress ?

  • Pranav Raghaw

    @claudiarrromano:disqus @seguerriero:disqus
    how Can this be used in a single page, out of the whole website, to search only from the content in that page and show results on the page itself.