Select2 Custom Matcher to keep options open if group title matches
Dan Tappin
I hope my question makes sense - wasn't sure on the best way to describe this. I have a grouped Select2 select form input something like this:
- Vegetables
- Lettuce
- Tomatoes
- Onions
- Fruit
- Apples
- Oranges
- Bananas
- Spreads
- Vegemite
- Nutella
- Peanut Butter
So you start typing App and of course you get Apples from the Select2 dropdown. If you type veg you get Vegemite and the Vegetables group heading but all the options are hidden. I would like to keep all the group options visible if a search term matches the group heading.
I did some digging in the select2 source code and I think it's actually easy but I could be wrong and if I am right I am stuck on how to make it work. Here is the source code:https://github.com/select2/select2/blob/81a4a68b113e0d3e0fb1d0f8b1c33ae1b48ba04f/src/js/select2/defaults.js:
and a Gist I created vs. trying to paste it in here:
https://gist.github.com/jasper502/40b810e55b2195476342
I switched the order of the code and made some slight variable name changes to reflect this. I think this would keep the option group open. I tried to make a custom matcher based on this (see my Gist) but I was stuck at the point where it calls DIACRITICS:
After some Googling I realized that this is replacing accented characters which I know I don't have so I removed that portion.
Now my matcher fails with TypeError: data.indexOf is not a function. (In 'data.indexOf(term)', 'data.indexOf' is undefined)
errors in my browser.
I am sure I am very close here but I am a bit over my head and beyond my experience and/or skill level to finish this off. Any pointers or ideas would be appreciated.