For people familar with AngularJS, it's almost frighteningly easy to make a live-search on a repeating iterator.

Here's such an example: http://jsfiddle.net/r26xm/1/

Out of the box it just works. If nothing is typed into the search field it returns everything.

A big problem with this is that the pattern matching isn't very good. For example, if you search for ter you get Teresa and Peter.
More realistically you want it to only match with a leading word delimiter. In other words, if you type ter you want it only to match Teresa but not Peter because Peter doesn't start with ter.
So, to remedy that we construct a regular expression on the fly with a leading word delimiter. I.e. \bter.

Here's an example of that: http://jsfiddle.net/f4Zkm/2/

Now, there's a problem. For every item in the list the regular expression needs to be created and compiled which, when the list is very long, can become incredibly slow.
To remedy that we use $scope.$watch to create a local regular expression which only happens once per update to $scope.search.

Here's an example of that: http://jsfiddle.net/f4Zkm/4/

That, I think, is a really good pattern. Unfortunately we've left the simplicity but we now have something snappier.

Unfortunately the example is a little bit contrived because the list of names it filters on is so small but the list could be huge. It could also be that we want to make a more advanced regular expression. For example, you might want to allow multiple words to match so as ter ma should match Teresa Mayers, John Mayor and Maria Connor. Then you could make a regular expression with something like \b(ter|ma).

For seasoned Angularnauts this is trivial stuff but it really helped me make an app much faster and smoother. I hope it helps someones else doing something similar.

ëRiC - 05 February 2014 [«« Reply to this]
Obviously there is some discrepancy in what people think find-when-typing dialogs should do. ;D
I for instance find it very good that 'ter' gives you 'Teresa' AND 'Peter'! I'd rather state it explicitly when I want the start or end of a term by 'ter*' or '*ter'. But I'd say hits at the beginning should be sorted upfront.

On the other hand I think broaden the search with an extra word is the opposite of what I'd expect!: Just like the Firefox Awesome bar each word sorts again in the former hits to shorten the list further.
Peter Bengtsson - 05 February 2014 [«« Reply to this]
Right you are. I hope the point of the tip still comes through; that you can make a local regex with $scope.$watch
ëRiC - 05 February 2014 [«« Reply to this]
Oh yes of course! The simplicity of the whole thing is very enlightening! Thx for sharing!
Peter Bengtsson - 05 February 2014 [«« Reply to this]
Perhaps the ideal thing is to do two rounds of searching. If nothing is found when searching for "cus" then desperately return all things that have it anywhere in the string like "Circus".

Also, my thinking with the preference for `\d(...)` as in this blog is that for a live-search you kind of expect it to work similar to a autocomplete functionality.


Your email will never ever be published