Select2 searches inside html formatted parameters

Question

I am using select2 widget and I need to display the search results in html format.

Therefore, I use it as follows:

function formatMyItem(myItem) { return defaultEscapeMarkup(myItem.someDescription) + " <strong>(" + myItem.someOtherValue + ")</strong>"; } function defaultEscapeMarkup(markup) { var replace_map = { '\\': '&#92;', '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;', "/": '&#47;' }; return String(markup).replace(/[&<>"'\/\\]/g, function (match) { return replace_map[match]; }); } var suggestionValues = []; for (var i = 0; i < myData.length; i++) { var myItem = myData[i]; suggestionValues.push({ id: myItem.someKey, text: formatMyItem(myItem) }); } $mySelect.select2({ width: 'resolve', multiple: true, data: suggestionValues, escapeMarkup: function(m) { // Do not escape HTML in the select options text return m; } }); 

But now, when the user is looking for something, this term is viewed inside the HTML option.

For example, if the user searches for “strong” (assuming that some descriptions may contain the word “strong”), then select2 will offer all the values ​​(because they all contain “strong”).

In addition, when the user searches for “<” (assuming that some descriptions contain mathematical characters), then select2 will return all values ​​(since they all contain html tags), but will not highlight the actual “less” character in the descriptions, because they were actually converted to "& lt;".

How can I make select2 not search inside html tags?

Answer 1

Well, it seems the solution was pretty simple: D

I added the following:

  $mySelect.select2({ width: 'resolve', multiple: true, data: suggestionValues, escapeMarkup: function(m) { // Do not escape HTML in the select options text return m; }, matcher: function(term, text) { // Search the term in the formatted text return $("<div/>").html(text).text().toUpperCase().indexOf(term.toUpperCase())>=0; } }); 

So now, when the user searches for “strong,” they only get relevant results.

But now there is another problem:

Now, if the user is looking for "<", then select2 will highlight "<" inside the strong tag.

It seems I also need to “plan” somehow a shortcut to the search results ...

EDIT: Returning to this, it seems that the highlighting solution is not so simple ...

The default implementation in select2 looks like this:

  formatResult: function(result, container, query, escapeMarkup) { var markup=[]; markMatch(result.text, query.term, markup, escapeMarkup); return markup.join(""); }, ....... function markMatch(text, term, markup, escapeMarkup) { var match=text.toUpperCase().indexOf(term.toUpperCase()), tl=term.length; if (match<0) { markup.push(escapeMarkup(text)); return; } markup.push(escapeMarkup(text.substring(0, match))); markup.push("<span class='select2-match'>"); markup.push(escapeMarkup(text.substring(match, match + tl))); markup.push("</span>"); markup.push(escapeMarkup(text.substring(match + tl, text.length))); } 

Somehow I need to replace these two functions, but I cannot find a simple solution for matching from a range in formatted HTML (search term for highlighting) back to the html source (so that I can add <span class = "select2-match '>). ..

If you have the best solutions, please feel free to share them ...