Select2, if the parameter does not match, "other" will appear

Question

With the select2 drop-down list, how can I get the default parameter if no parameters match user input?

$("something").select2({ formatNoMatches: function(term) { //return a search choice } }); 

I was not able to find anything that really matches this desired functionality in select2 documentation or stack overflow.

Edit I'm getting close to this

 $("something").select2({ formatNoMatches: function(term) { return "<div class='select2-result-label'><span class='select2-match'></span>Other</div>" } }); 

But it is pretty hacked with a bat, and is also not clickable.

Answer 1

In addition to @vararis answer:

Select2, attached to the <select> element, does not allow you to use the custom functions createSearchChoice and query , so we will need to manually add the option element (I will add it as the last variant of the element so that we can easily .pop from the result set):

 <select> ... <option value="0">Other</option> </select> 

Then pass the matcher custom function matcher that this Other option is always mapped.

NOTE. Select2 3.4+ uses a different default resolver than the one currently shown in the documentation, this new one has a call to stripDiacritics , so that a matches á , for example. Therefore, I’ll apply the default matcher , which comes with the version of Select2 included in the page, to apply my default matching algorithm to any option, and not to the Other option:

 matcher: function(term, text) { return text==='Other' || $.fn.select2.defaults.matcher.apply(this, arguments); }, 

Finally, we need to remove the “Other” parameter from the result set when there is a result other than the “Other” result (which is always in the result set):

 sortResults: function(results) { if (results.length > 1) results.pop(); return results; } 

Demo

Answer 2

I solved this by changing the socket.

 $('#activity_log_industry_name').select2 matcher: (term, text) -> if text=="Other" return true text.toUpperCase().indexOf(term.toUpperCase())>=0 

(this is in coffeescript.) The only problem is that "Other" will appear for any search, but this is easily solved by changing the sortResults function.

Answer 3

Try this answer at fooobar.com/questions/959746 / ...

 createSearchChoice: function (term) { return { id: term, text: term }; } 

Answer 4

Use the following code to display the message as "Other" if no matches are found

 $("select").select2({ formatNoMatches : function(term) { return "Other"; } }); 

Answer 5

try this work in the new version (Select2 4.0.3) without adding a new variable.

→ → Fiddle here <<<

first you need to load the javascript name github / alasql "to search as a query in the data

 <select id="something"> ... <option value="other">Other</option> <!-- or put this in "dataItemsList" for dynamic option --> </select> 

then in your javascript

 // other than this array we will give "other" option var ajax_search_array = ['your', 'item', 'for', 'search']; $("#something").select2({ placeholder: "Choose your something", //data: dataItemsList, //your dataItemsList for dynamic option //... //... tags: true, createTag: function (tag) { // here we add %search% to search like in mysql var name_search = "%"+tag.term.toString().toLowerCase()+"%"; // alasql search var result = alasql('SELECT COLUMN * FROM [?] WHERE [0] LIKE ?',[ajax_search_array, name_search]); // if no result found then show "other" // and prevent other to appear when type "other" if(result==false && tag.term != "other"){ return { id: "other", text: "Other" }; } }); 

hope this work.