Search Clear with jQuery

Notebook // September 2014

I've noticed more attention is being given to search bars on web sites and applications. As an example, Apple and Evernote have gone the extra mile with design and functionality to create a better user experience with their search feature.

Apple
Apple - Search Clear Icon

Evernote
Evernote - Search Clear Icon

I've entered a value for both of the search features above to show that a clear icon appears when a value is typed into the field. There are more things going on here as well. Let's take a look at how Evernote's search feature works within their application:

  1. When a value is entered a clear icon appears.
  2. A value can be removed by clicking on the clear icon or removing text manually (either action will also hide the clear icon)
  3. Pressing the ESC key will remove the text and clear icon

These features play nicely with both desktop and mobile users.

Now, I know this isn't something that's really that new. It's been around for a while, but there aren't any good tutorials out there that actually provide all these steps for proper execution, so I wrote one myself.

View Demo

CSS

Not a whole lot to look at here, just some simple styling with some CSS3 touches.

HTML

jQuery

As a friendly reminder, make sure you are also including the latest jQuery script to your pages as well. Otherwise, this won't work.

Here's what's happening:

  1. If a value isn't equal to 0 then show the clear icon, otherwise don't show it.
  2. If ESC is pressed after a value is entered then clear the field and clear icon.
  3. If the clear icon is clicked, remove the value and clear icon.

Join the Conversation