Project Thirteen: Search

Aren't we all searching for something? A community, a purpose, car keys when you're in a rush... Or simply a gift to buy last minute?

I guess if there would be a nomination for the most used search bar it would be this one:

But not only a search engine needs a search: it's hard to find a website or a service that doesn't! So how about implementing one today?

Search Input: requirements and recipe

As a user I want to be able to input a search query, so that I can see information related to my request.

I'm sure you're already have a design in mind and, by all means - go wild as long as you fulfil these requirements:

Requirements

1. User should be able to enter search request and press "Enter" to perform search or click/tap on a button
2. A list of suggestions should be shown as user types their search query
3. It should be possible to select a suggestion by using keyboard or a pointer event.
4. Input design should have sufficient contrast
5. Any icons present should have proper aria labels
6. Make sure that it works to copy & paste queries as well

Recipe

1. Start with the design: create a static input field
2. Ensure that it matches accessibility requirements
3. Create static markup for suggestions list
4. Implement suggestions logic
5. Ensure that it's still accessible
6. Add finishing touches and praise yourself!

Hints

It's always easier to keep things accessible by using build-in components, e.g. <input type="search"> in a <form> would already cover most of functionality.

Consider adding a bit of a delay before you update suggestions - if the user types very fast you'll end up fetching suggestions from the eventual server much more often than needed.

Hard Mode: Search Sanitiser

Most of users are jolly good fellows, but not always - and often they might try and do something that aren't supposed to: like get access to your whole database or break your server.

Try and write a function that would sanitise whatever user inputs to make sure that while they still can use the search - they can't do anything else.

A lot would depend on the underlying server architecture, so maybe you could make it easily adjustable - for example using a tokeniser and a black list of symbols or sequences?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?