// index.hbs<PowerSelect@selected={{@selected}}@onChange={{@onChange}}@options={{this.initialSet}}@searchEnabled={{true}}@search={{this.search}}as|item|>{{item.name}}</PowerSelect>

// index.jsimportComponentfrom"@glimmer/component";import{action}from"@ember/object";exportdefaultclassMySelectComponentextendsComponent{// Maximum number of items to be displayed in the drop-down.MAX_ITEMS=100;// All the items before any filter is applied.getinitialSet(){// We use `null` filter, to limit the number// of items in initial list to `MAX_ITEMS`return[...this.filter(null)];}// Our component receives all the possible options// as `items` argument.getallItems(){returnthis.args.items;}// Search action invoked by the PowerSelect.@actionsearch(needle){return[...this.filter(needle)];}// We're going to filter options using a generator*filter(needle){const{allItems,maxSize}=this;letcount=0;leti=0;// Iterate over all items from initial set.// Stop when we found maximum number of items// or when we went through the whole initial set.while(count<this.MAX_ITEMS&&i<allItems.length){// If there is no search term, every item matches.// Otherwise test current item against given needle.if(!needle||this.check(allItems[i],needle)){// If we found a match, yield it.yieldallItems[i];count++;}i++;}}// Function that will test whether item matches needlecheck(item,needle){// For simplicity let's say each item has property// `name` and we just check for a substring match.if(item.name.includes(needle)){returntrue;}}}