Compare filtering items

components.classic-search\.js

import Component from '@ember/component';
import { computed } from '@ember/object';

export default class extends Component {
  query = '';

	@computed('query') get _options() {
    if (this.query) {
    	return this.options.filter((option) => {
				return option.value.toLowerCase().lastIndexOf(this.query, 0) === 0;
      }); 
    } else {
      return this.options;
    }
  }
}

components.glimmer-search\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @tracked query = '';

	get options() {
		if (this.query) {
    	return this.args.options.filter((option) => {
				return option.value.toLowerCase().lastIndexOf(this.query, 0) === 0;
      }); 
    } else {
      return this.args.options;
    }
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import randomString from 'twiddle/utils/random-string';

function generateOptions(amount) {
 	return Array.from(Array(amount)).map(() => ({ value: randomString() })); 
}

export default class ApplicationController extends Controller {
  appName = randomString();

	options = generateOptions(5000);
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<div style="display: flex">
	<section style="flex-basis: 50%">
  	<h2>Filtered in Glimmer Component</h2>
  	<GlimmerSearch @options={{this.options}} />
  </section>
	<section style="flex-basis: 50%">
    <h2>Filtered in Classic Component</h2>
  	<ClassicSearch @options={{this.options}} />
  </section>
</div>

templates.components.classic-search\.hbs

<div>
	<Input @value={{this.query}} />
</div>
<ul>
  {{#each this._options key="@index" as |option|}}
    <li>
      {{option.value}}
    </li>
  {{/each}}
</ul>

templates.components.glimmer-search\.hbs

<div>
	<Input @value={{this.query}} />
</div>
<ul>
  {{#each this.options key="@index" as |option|}}
    <li>
      {{option.value}}
    </li>
  {{/each}}
</ul>

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}

utils.random-string\.js

const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

export default function randomString(amount = 8) {
	return Array.from(Array(amount)).reduce((finale) => {
		return `${finale}${CHARS.charAt(Math.floor(Math.random() * CHARS.length))}`;
  }, '');
}