Searching the preview word list

The preview words page is where testers on pull request previews check the day’s direction letters, the combo candidates, and the full word list. The word list runs to thousands of entries, so finding one word meant scrolling. This change adds a search box at the top of the page that filters every list on it.

Two ways to match#

The search has two modes. Fuzzy is the default: the query’s letters must appear in the word in order, with gaps allowed. Exact needs one contiguous run. Both compare lower-cased text, and the query is trimmed first, so stray spaces do not change the result.

query   fuzzy   exact   (against the word "snake")
snk     yes     no
sna     yes     yes
ake     yes     yes
sae     yes     no

Fuzzy suits a tester who remembers a word’s shape but not its spelling. Exact suits one who knows a fragment and wants every word containing it.

Counts, empty groups, and antonym pairs#

While a query is active, the page reads “3 of 412” style counts, so a tester can see how much the filter removed. First-letter groups with no match are hidden rather than shown empty. An antonym pair stays visible when either of its words matches, and the matching side is marked, so the pair still reads as a pair.

A filter that works without the script#

The live filter is a small script that runs on each keystroke and swaps in the new results and day links. The search is still a plain GET form, so submitting it with the script turned off gives the same result on a full page load. The server does the filtering either way, and the script only fetches the same address on each keystroke, so it changes how quickly the results arrive.

Navigation follows the same idea. The day links keep the query and mode, so moving to the next day does not lose the search. Switching language clears the query and keeps the mode, because the words themselves change with the language.

What review caught#

An automated code review found that a query of only spaces counted as an active search. The fix trims the query before deciding whether a search is active, and a regression test pins it. The same review asked for two raw-unit CSS values to become design tokens, and they did.

The matching rules live in a pure filter with its own unit tests, separate from the page, so the rules can be checked without rendering anything. When the change merged, the page’s end-to-end test passed all three of its cases.