Skip to content
No description, website, or topics provided.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Join the chat at Build Status

ember autosuggest

This component will auto-complete or autosuggest completed search queries for you as you type.

There is keyboard navigation using the up and down keys to scroll up and down the results and enter adds the selection, while hitting escape hides the autocomplete menu.


{{x-autosuggest source=controller destination=tags}}
  • Specify a source binding that displays a list of selections to choose from.
  • Specity a destination binding that your selections will be bound to.


  • searchPath - Specify the property for each object in the source list that will be used to auto suggest, the default is name.
{{x-autosuggest source=controller destination=tags searchPath=make}}
  • minChars - Specify how many characters the user must enter into the input before the search is triggered, the default is 1.
{{x-autosuggest source=controller destination=tags minChars=0}}

Customise Suggestions and Results

  • You can prepend content to the suggestions and the results by using the component in its block form:
    {{#x-autosuggest source=controller.employees destination=tags searchPath="fullName" minChars=0 as |selection|}}
      <img src="img/small_avatar.png" alt="{{}}" class="avatar"/>
  • The above declaration will result in the following markup:

ember autosuggest

Query an Ember-Data model

Generate ember-data type findQuery queries on the remote server by getting a reference to the type.

{{x-autosuggest source=Employee destination=chosenEmployees searchPath="fullName" minChars=0}}

This will call findQuery on an Employee model with an expression created from the searchPath. In the above example, that would be:

store.find("employee", {fullName: '<query>'});

View the demo

cd tests/dummy
ember server
open a browser at http://localhost:4200/

Building yourself

npm install
bower install
ember build

The builds will be in the dist/ directory.


With Ember-CLI

If you are using ember-cli you can add emberx-autosuggest to your package.json:

"devDependencies": {
  "emberx-autosuggest": "~ 0.2.1"

You may want to be more precise with your version locking.

Running Tests

  • ember test
  • ember test --server
You can’t perform that action at this time.