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
- User should be able to enter search request and press "Enter" to perform search or click/tap on a button
- A list of suggestions should be shown as user types their search query
- It should be possible to select a suggestion by using keyboard or a pointer event.
- Input design should have sufficient contrast
- Any icons present should have proper aria labels
- Make sure that it works to copy & paste queries as well
Recipe
- Start with the design: create a static input field
- Ensure that it matches accessibility requirements
- Create static markup for suggestions list
- Implement suggestions logic
- Ensure that it's still accessible
- 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?
Top comments (0)