ember-typeahead-latest

components.my-typeahead\.js

/**import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class extends Component {
}**/
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { guidFor } from '@ember/object/internals';

export default class  extends Component {
  inputId = 'typeaheadInput-' + guidFor(this); 
  comboboxId = 'combobox-' + guidFor(this);
  listboxId = 'listbox-' + guidFor(this);
  labelId = 'label-' + guidFor(this);
@tracked textValue =''
  listboxOptions = [
    {'label':'Cat', 'value':'cat'},
    {'label':'Dog','value':'dog' }, 
    {'label':'Rabbit','value':'rabbit'},
    {'label':'Pig','value':'pig'}
  ];
	isReady =false;
  	
    showList= function(){
      this.toggleProperty('isReady');
    };

@action
  change(event) {
    console.log(event);
    this.set('textValue', e.target.value)
  
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Type-Ahead';
}

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

ul {
  border: 1px solid black;
  max-width:50%;
  margin-top: 0;
  overflow-y: scroll;
}

li{
    max-width:50%;
    word-break:break-all;
}

templates.application\.hbs

<h5>{{this.appName}}</h5>
<br>
<MyTypeahead @typeaheadLabelText="Choice or Search Label Text" />
<br>
{{outlet}}
<br>
<br>

templates.components.my-typeahead\.hbs

{{yield}}
<div class="form-group">
  <label for={{this.inputId}}
       id={{this.labelId}}
       class="combobox-label">
    {{@typeaheadLabelText}}
  </label>
  <div class="combobox-wrapper">
    <div role="combobox"
        aria-expanded="false"
        aria-owns={{this.listboxId}}
        aria-haspopup="listbox"
        id={{this.comboboxId}}>
      <input type="text"
            aria-autocomplete="list"
            aria-controls={{this.listboxId}}
            id={{this.inputId}}
            value={{this.textValue}}
            {{on "change" (fn this.change event)}}>
            {{this.textValue}}
    </div>
    
    {{#if isReady}}
    <ul aria-labelledby={{this.labelId}}
        role="listbox"
        id={{this.listboxId}}
        class="listbox hidden">
      {{#each this.listboxOptions as |option index| }}
        <li class="listbox-result" role="option" id="{{this.listboxId}}-{{index}}">{{option.label}}</li>
      {{/each}}
    </ul>
    // Code goes here
{{/if}}
  </div>
</div>

twiddle\.json

{
  "version": "0.17.1",
  "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.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}