Hi:
I've been trying to get to the root of this, initially believing it was a styling issue which could be easily remedied, but alas, it seems to be more insidious.
As soon as I type a word, then a space, then enough of the next word to cause a shift in matches, the original word is deleted from any matches thereafter, until I refresh the page.


It doesn't seem to happen with small datasets (I think).
Furthermore, when I type then delete all letters in a search, the first letter is still shown as highlighted in the list:

I'm hoping these issues are related?
Any help or ideas are very much appreciated.
Thanks in advance.
Quick update. I've narrowed it down to this line in the highlight function:
middlebit.parentNode.replaceChild(spannode, middlebit);
This removes visual highlighting altogether but fixes the aforementioned issues. Until I have more time to debug I'll be leaving it at is, unless someone else lends it the time :)
The highlight function really seems to be badly broken. The issue also appears on the demo page in the email contacts example.
I've attached a GIF showing the error.

For now I'm going to disable the highlighting in my project.
This highlighting issue (and #1142) can be fixed by ensuring that Selectize doesn't attempt to highlight already-highlighted areas, creating nested spans, e.g.
<span class="highlight">B<span class="highlight">r</span>ian</span>
This can be prevented by adding an additional condition:
( node.className !== 'highlight' || node.tagName !== 'SPAN' )
to this line:
https://github.com/selectize/selectize.js/blob/master/src/contrib/highlight.js#L28
If you'd like, I can run the tests and submit a PR.
Absolutely!
I built from master and am still having issue with this, Part of the first word gets deleted.
"Mile End" becomes "Mil End" and only End is highlighted. This is not what is received from the server.
Also the way it is filtering is counter intuitive. I want a right phase search rather an 'or' search with two word. So the cache filtering don't match how the server is searching.
Here is an example
just try typing "Mile End" once you get to "Mile En" it appears as "Mil End"
I am still having this issue in the current version. It stems from the highlight code trying to re-highlight text that has already been highlighted.
Adding this fixed that error:
```
if (node.parentNode && node.parentNode.classList.contains('highlight')) {
return skip;
}
I added that after these lines in the highlight function:
var highlight = function(node) {
var skip = 0;
if (node.nodeType === 3) {
var pos = node.data.search(regex);
if (pos >= 0 && node.data.length > 0) {
```
The bug regarding the option remaining highlighted after search still exists.
Downloaded Selectize standalone yesterday (v0.12.4)
Yes, the bug is still there in (v0.12.4), see JSFiddle type blanco cafe
But applying @Vaccano fix works!
closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.
Most helpful comment
This highlighting issue (and #1142) can be fixed by ensuring that Selectize doesn't attempt to highlight already-highlighted areas, creating nested spans, e.g.
<span class="highlight">B<span class="highlight">r</span>ian</span>This can be prevented by adding an additional condition:
( node.className !== 'highlight' || node.tagName !== 'SPAN' )to this line:
https://github.com/selectize/selectize.js/blob/master/src/contrib/highlight.js#L28
If you'd like, I can run the tests and submit a PR.