Client-side full-text search in CSS

Avatar of Chris Coyier
Chris Coyier on

Try Mailchimp today. MailChimp Tracking Pixel

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 →