search

DSACMS / open

Other
2 stars 1 forks source link

Add search box to projects page. #26

Closed Gaelan closed 10 months ago

Gaelan commented 11 months ago

Problem

It'd be nice to have an easy way to filter for projects matching a given keyword.

Solution

Implement a search box with a bit of a JS.

Just plain JS, no frameworks, no jQuery - in all my years of web dev, I'm not sure I've ever done that! A little clunkier, maybe, but it feels nice.

UI-wise, I don't use the USWDS search component, as that assumes a search button; we don't need one here, we can filter as the user types. Instead, I did something custom (or, rather, using more basic USWDS components) to put a search con on the left side of the field, along with an old-fashioned label:

screenshot of the projects page, now with a search box (as described). The search box has a label (with the text 'filter') and a little magnifying glass icon inside the field.

Test Plan

Tested manually.

Gaelan commented 10 months ago

(Force pushed some HTML changes - meant to do that Friday, oops. Just adds a little search icon to the search box, as the screenshot already shows.)