Display matching optgroup results with select2

Question

I am using select2 using Bootstrap 3. Now I would like to know if all optgroup elements can be displayed if the search matches the name optgroup, although it can also search for elements. If possible, how can I do this?

Answer 1

The actual solution found was modified using the opt modifier

$("#myselect").select2({ matcher: function(term, text, opt){ return text.toUpperCase().indexOf(term.toUpperCase())>=0 || opt.parent("optgroup").attr("label").toUpperCase().indexOf(term.toUpperCase())>=0 } }); 

Assuming that a tag attribute has been set in each optgroup.

Answer 2

The above answers don't seem to work out of the box with Select2 4.0, so if you are looking for this, check this out: https://github.com/select2/select2/issues/3034

(Use the following function: $("#example").select2({matcher: modelMatcher}); )

 function modelMatcher (params, data) { data.parentText = data.parentText || ""; // Always return the object if there is nothing to compare if ($.trim(params.term) === '') { return data; } // Do a recursive check for options with children if (data.children && data.children.length > 0) { // Clone the data object if there are children // This is required as we modify the object to remove any non-matches var match = $.extend(true, {}, data); // Check each child of the option for (var c = data.children.length - 1; c >= 0; c--) { var child = data.children[c]; child.parentText += data.parentText + " " + data.text; var matches = modelMatcher(params, child); // If there wasn't a match, remove the object in the array if (matches == null) { match.children.splice(c, 1); } } // If any children matched, return the new object if (match.children.length > 0) { return match; } // If there were no matching children, check just the plain object return modelMatcher(params, match); } // If the typed-in term matches the text of this term, or the text from any // parent term, then it a match. var original = (data.parentText + ' ' + data.text).toUpperCase(); var term = params.term.toUpperCase(); // Check if the text contains the term if (original.indexOf(term) > -1) { return data; } // If it doesn't contain the term, don't return anything return null; } 

Answer 3

A few minor changes to the user-suggested code, less repetitive and cope when there are no opt parent groups:

 $('select').select2({ matcher: function(term, text, opt){ var matcher = opt.parent('select').select2.defaults.matcher; return matcher(term, text) || (opt.parent('optgroup').length && matcher(term, opt.parent('optgroup').attr("label"))); } });