Client-side full-text search in CSS

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Clever idea by François Zaninotto. Add to the searchable element a data-index attribute which contains all the text content of its children smooshed together. Then you can find matches using the [data-index*=""] selector, which is fast. Essentially doubles the DOM weight, but that’s rarely too big of a deal.

Direct Link →