.searchRemoveChoice escape & on edit backspace

How Do I...
#1

Hello,

I have a search criteria with an ampersand:
house & home

When i do an edit back space, I can edit the criteria again, but select2 converts the string to:
house & home

ie it changes the & to &

If I modify the below code to escape item.text it works correctly.

Search.prototype.searchRemoveChoice = function (decorated, item) {
    this.trigger('unselect', {
      data: item
    });
   // this.$search.val(item.text);
   this.$search.val($.parseHTML(item.text)[0].textContent);
    this.handleSearch();
 };

What would be the correct way to do this?

Cheers

I need to use escapeMarkup as by criteria has html, <b>house</b> & home

 $("#searchStringId").select2({
 	multiple: true,
 	escapeMarkup: function (markup) { return markup; },
 	minimumInputLength: 2,
 	templateResult: formatRepo,
 	templateSelection: formatRepoSelection,
 	ajax: {...},
 });
#2

I tried that search term in one of the examples on the Select2.org site and it didn’t exhibit this behavior. I’d bet it’s your escapeMarkup callback that’s causing this issue. If you remove that callback, do you still see the issue? If not, then that’s the cause, and you will have to be more clever about the logic in your callback to handle the ampersand character.

When you say your “criteria” has HTML, do you mean the contents of your <option> elements? Could you send me an example of the data that is in your Select2? Is it hard-coded in the HTML, or are you using a JavaScript array or the AJAX feature to pull in the data?

#3

(…I am looking to replace my jQuery UI stuff as its no longer maintained)

I tried disabling the escapeMarkup, without much success, I need to use it as my suggester highlights the search criteria match results,

If I search for house, I return suggestions via ajax:
URL: /search.action?searchString=House+%26+Home
Suggestion: <b>House</b> & Home

Although, the escapeMarkup hint helped, as it looks like a double escape thing.

The form tag I use also escapes the value so I get an extra &amp; on the option text

<select id="searchStringId" name="searchString">
<option value="House &amp; Home" selected="selected" title="House &amp; Home">House &amp;amp; Home</option>
</select>

If I disable the escape on the form tag, it now works:

<select id="searchStringId" name="searchString"">
<option value="House &amp; Home" selected="selected" title="House &amp; Home">House &amp; Home</option>
</select>

Although the browser shows House &amp;amp; Home correctly, it goes wrong on the back space.

Cheers Greg

#4

You should not need any special code in order to provide HTML formatting in the result list (e.g., to show matches within your results). I created this example quite some time ago, which I believe does essentially what you’re trying to do: Select2 with highlights and extra data (codepen.io).

There are a lot of features in this demo, but the part you’ll probably be interested in is in index.js, lines 30-77 (and especially lines 48-60, which show how to mark the part of the item text that matches the user’s search term), and also lines 79-86, which outputs the highlighted results.

I hope this example will be helpful to you.

#5

OK, thanks. I would use a page submit for fuzzy matches from Lucene, is there anyway I can stop the box thing on existing criteria text? …Although, the backspace edit works, unless you remember its there, it seems a non standard way, compared to other search boxes. Other than this is seems to work well.
Cheers Greg

#6

I’m not sure what you mean by “stop the box thing on existing criteria text”. Can you give me a more detailed explanation of what the " box thing" is, and under what circumstances you want to stop it (stop it from doing what?).

#7

Screenshot from 2021-03-20 08-21-07

<li title="test" data-select2-id="3" class="select2-selection__choice"><span class="select2-selection__choice__remove" role="presentation">×</span>test</li>

.select2({
	multiple: true,
        ....
});

You use backspace edit to change the existing value. Could not find this feature in the docs? Seems unique only to select2 and overly complicated.

#8

I have seen similar behavior; for example, in the address fields of Microsoft Outlook. I’m not sure how you want it to behave, but if you want to change it you’ll have to implement your own SelectionAdapter. That’s the only way Select2 provides to alter the basic functionality of the widget.

#9

On the internet it is pretty unique. Just seems an overkill for what I need, and also don’t want to get into having to rewrite stuff. Docs are also not great on how to do this?

Although it works well. Cheers.

#10

You’re correct that the documentation on how to modify (or write your own) adapters is basically nonexistent. I did manage to find one tutorial online a few years ago.