This is cool. But, am I missing something? I can already do this with CTRL+F.

You, me and the rest of us can. But our users, may not appreciate the Ctrl+F.

Besides, there is a big difference between highlight matching (Ctrl+F) and show only matching, especially in apps where the dataset at client side is large.

You don't need to use javascript to hide/show matching elements. He also mentions something about it being faster than just an indexOf(), but gives no real benchmarks, so take that with a grain of salt.

(Rereading again..) The JS claim is silly. He is saying that because we are dynamically creating a single style, that show/hide logic will be faster. I disagree with this, since adding a CSS selector to the page means the page needs to rematch that new selector against every element of the page and re-render each matching element, same as if we had just changed the matching elements with javascript.

EDIT: thinking on this some more, it actually should be a bit faster for huge collections, since javascript has to update items individually, whereas the browser has probably optimized this code path.

Well, it's fewer DOM manipulations, right? Touch a single style element vs updating a bunch of them.

It's fewer DOM manipulations from Javascript yes. The browser will still internally change the styles associated with the DOM elements, just without the JS overhead.

Yeah, I think you're missing the point that it's not using Javascript at all but only CSS.

Actually, it's rather heavily dependent on Javascript as that's how most of the functionality is handled. Plus some server side is likely required to insert the raw text to be searched in the data attributes. I guess you could hand-code all that text inside numerous data attributes but different people may do things differently.

Although, it is clever but rather limited.

... what do you think is handling the key pressing?... It's not just CSS. The only thing this does that's different than iterating over every element is it splits the hiding to the CSS engine.