As an exercise for myself to practive my JavaScript "skills" I'm trying to write (let's reinvent) a client-side filter. It should be able to filter "content blocks" as the client types.

Wit a "content block", I mean a list of DomElements that each contain atleast one text node (but it is possible that they contain more, and even a different amount of text nodes, nested inside other nodes, ...)

Obviously there are 2 approaches:

1. on init: scan all nodes and store all the text in some kind of Map or a tree or whatever.

2. Simply iterate over every item and check wether it has the string to search/filter for. One could add performance here by caching, only filtering the current remaining items if text is added, ...

Obviously, if the numer of nodes is really big, 1) will take a while to build the 'index' but it will obviousl perform faster once it is built. 2) however will be available write on pageload since no init is performed. But ofcourse will take longer to search...

So my question, what is the best approach here? And how would one implement 'caching' and/or 'index' and/or ... ?

As an exercise for myself to practice my JavaScript "skills" I'm trying to write a client-side filter. It should be able to filter "content blocks" as the user types.

By "content block", I mean a list of DomElements that each contain at least one text node - it is possible that they contain more, and even a different amount of text nodes, nested inside other nodes, etc.

I've thought of 2 approaches:

1. On page initialization, scan all nodes and store all the text in some kind of Map or a tree.

2. Simply iterate over every item and check whether it has the string to search/filter for. One could add performance here by caching, only filtering the current remaining items if text is added, etc.

Obviously, if the number of nodes is really big, option 1 will take a while to build the 'index' but it will perform faster once it is built. Option 2 however will be available right on page load since no initialization is performed. But of course it will take longer to search.

So my question is: what is the best approach here? And how would one implement 'caching' and/or 'index'?