Support word boundaries

[peterbe]

When I use the demo and search for the word and it finds and highlights b<mark ...>and</mark>s.

Would be great with an option to make it NOT match unless the words is limited by a word delimiter. E.g. match and highlight <mark>and</mark>erson and the full word <mark>and</mark>.

[bvaughn]

Would be great with an option to make it NOT match unless the words is limited by a word delimiter.

I don't see how [and]erson is any more of a full word than b[and].

[bvaughn]

This component does case-insensitive string matching in the same way that browser text search does. It would be possible to add support for prefix strings only (like I think you're requesting) but it's not a feature I've needed.

[peterbe]

I don't see how [and]erson is any more of a full word than b[and].

I'd need for a search functionality. I display the results as the user types. Perhaps she's typed "and" in the midst of typing "anderson".

[bvaughn]

Sounds like you want to enforce prefix string matching.

This component isn't meant for that (currently). It just does simple sub-string matching (again, like the browser does when you search text).

If you'd be interested in contributing though, it probably wouldn't be too hard to add support for this. :)

[peterbe]

I might take a stab.
Many years ago I wrote this function.
If the text is "ian anderson is a band member" and the terms are ["and"] the outcome becomes "ian <b>anderson</b> is a band member".

That's quite nice when you're doing autocomplete because the back-end service will suggest "peter bengtsson", if the user has typed "ben".

See http://codepen.io/peterbe/pen/akXvJm?editors=0011#0

One neat feature of this is that if you have a stemmer to help, and the user types "searching" or "searches" it might find "searched" or "searcher". Quite fuzzy but potentially useful.

[bvaughn]

Right, right. This component isn't intended for filtering, just sub-string highlighting. But I could see the usefulness for configuring its highlights to more closely match whatever searching/filtering library you're using. I just don't have the time to add it at the moment. :D

Btw I have some other libs you may find interesting if you're into search/stemming/etc. 😄 js-search, js-worker-search, treasure-data/redux-search.

[peterbe]

Wow! That's really useful. I actually already got started with Elasticlunr.js. It was the best I could find when I did some googling. Now I definitely need to check out this js-search of yours. I like the idea of being able to stuff it in a web worker.

[bvaughn]

:D Thanks!

I'm using redux-search (which is built on top of js-worker-search) in a production application right now and it's working great. No lag at all, even when indexing and searching many thousands of records.

[bvaughn]

By the way, this is a regex-friendly component so you could always accomplish this via regex too. For example, to use your example above, instead of passing "and" you'd pass "\band".

It did not occur to me to point this out earlier. 😄

[bvaughn]

Closed due to inactivity.

[danloiterton]

I was looking for this functionality also. Thanks for pointing out the regex option! I had to escape the word boundary though - so "\\band", for example.