slim-select icon indicating copy to clipboard operation
slim-select copied to clipboard

Feature request: match option groups when searching

Open kurthamilton opened this issue 5 months ago • 5 comments

Use case

I currently have a long list of ~20 option groups, each containing at least 5 options. When a user searches the list I want to show all options under option groups when the option group label is a match - even if the options themselves don't match. I would also like the option groups to be highlighted when matching, similar to the searchHighlight setting.

Suggested implementation

Add option group to the searchFilter callback. The value would be null if the option is not part of an option group.

Add searchHighlightGroups setting that would work in the same way as the searchHighlight setting.

new SlimSelect({
  select: document.querySelector('select'),  
  settings: {
	searchHighlight: true,
	searchHighlightGroups: true
  },
  events: {
	searchFilter: (option, search, optgroup) => {          
	  search = search.toLowerCase()

	  if (option.text.toLowerCase().includes(search))
		return true
	  
	  if (optgroup && optgroup.label.toLowerCase().includes(search))
		return true

	  return false
	}
  }
})

kurthamilton avatar Sep 20 '24 06:09 kurthamilton