Basic Usage

Use {{paper-autocomplete}} to search for matches from local or remote data sources.

Nothing selected...

No search text

Template

<PaperAutocomplete @disabled={{this.firstDisabled}} @onCreate={{this.addCountry}} @options={{this.items}} @allowClear={{true}} @defaultHighlighted={{if this.enableDefaultHighlighted this.highlightFirstMatch}} @searchText={{readonly this.countrySearchText}} @onSearchTextChange={{fn (mut this.countrySearchText)}} @selected={{this.selectedCountry}} @search={{if this.simulateQuery this.searchCountries}} @searchField="name" @labelPath="name" @placeholder="Select a Country..." @noMatchesMessage="Oops this country doesn't exist. Create a new country?" @onSelectionChange={{fn (mut this.selectedCountry)}} />

Block Custom template

Use {{paper-autocomplete}} with custom templates to show styled autocomplete results.

Selected: None

Template

{{#paper-autocomplete
  placeholder="Type e.g. ember, paper, one, two etc."
  options=this.arrayOfItems
  selected=this.selectedItem
  onSelectionChange=(fn (mut this.selectedItem))
  as |item term|}}
  <span class="item-title">
    {{paper-icon "star"}}
    <span>
      <PaperAutocompleteHighlight @searchText={{term.searchText}} @flags="i" @label={{item}} />
    </span>
  </span>
{{else}}
  Whoops! could not find!
{{/paper-autocomplete}}

Floating Label

The following example demonstrates floating labels being used as a normal form element.

Nothing is selected.

Template

<PaperInput @label="Name" @value={{this.name}} @onChange={{fn (mut this.name)}} @class="flex" />
<PaperAutocomplete @disabled={{readonly this.disabled2}} @required={{readonly this.isRequired}} @triggerClass="flex" @options={{this.items}} @selected={{this.selectedCountry2}} @search={{if this.simulateQuery2 this.searchCountries}} @searchField="name" @labelPath="name" @label="Select a Country..." @allowClear={{readonly this.allowClearWithLabel}} @noMatchesMessage="Oops this country doesn't exist." @onSelectionChange={{fn (mut this.selectedCountry2)}} as |country select|>
  <PaperAutocompleteHighlight @label={{country.name}} @searchText={{select.searchText}} @flags="i" />
</PaperAutocomplete>