Faux occlusion with Ember-Power-Select

// index.hbs

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

// index.js

import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class MySelectComponent extends Component {
  // Maximum number of items to be displayed in the drop-down.
  MAX_ITEMS = 100;

  // All the items before any filter is applied.
  get initialSet() {
    // 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.
  get allItems() {
    return this.args.items;
  }

  // Search action invoked by the PowerSelect.
  @action
  search(needle) {
    return [...this.filter(needle)];
  }

  // We're going to filter options using a generator
  *filter(needle) {
    const { allItems, maxSize } = this;
    let count = 0;
    let i = 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.
        yield allItems[i];
        count++;
      }
      i++;
    }
  }

  // Function that will test whether item matches needle
  check(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)) {
      return true;
    }
  }
}