DEV Community

Cover image for Project Thirteen: Search
Valeria
Valeria

Posted on

3

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:

Google search bar

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?

Buy Me A Coffee

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay