Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
ember-autosuggest will suggest names from a bound list.
JavaScript Other
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
generators initial commit
lib
packages
tests configuration update
.gitignore
.jshintrc
Assetfile
Gemfile
Gemfile.lock
LICENSE
README.md
Rakefile
VERSION upgrade to ember-1.1.2
autosuggest.png
config.ru
custom.png update README
ember-dev.yml include ember-data

README.md

THIS REPO HAS BEEN UPGRADED TO AN EMBER-CLI ADDON

ember-autosuggest

ember autosuggest

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

There is very basic 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.

Built against Ember 1.4.0 and Ember-Data beta 1.0.0-beta.7+canary

Usage

Declared in a template using the new Ember component syntax.

{{auto-suggest 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.

Arguments

  • searchPath - Specify the property for each object in the source list that will be used to auto suggest, the default is name.
{{auto-suggest 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.
{{auto-suggest 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:
    {{#auto-suggest source=controller.employees destination=tags searchPath="fullName" minChars=0 as |selection|}}
      <img src="img/small_avatar.png" alt="{{selection.fullName}}"/>
    {{/auto-suggest}}

  • The above declaration will result in the following markup:

ember autosuggest

Query an Ember-Data model

{{auto-suggest source=App.Employee destination=tags searchPath="fullName" minChars=0}}

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

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

Build It

  1. git clone https://github.com/dagda1/ember-autosuggest.git
  2. bundle
  3. bundle exec rake dist
  4. cp dist/ember-autosuggest.js myapp/
  5. cp examples/styles/autosuggest.css myapp/css

View the demo

Run bundle exec rackup and open http://localhost:9292/examples/index.html in a browser.

Running unit tests

Run bundle exec rackup and open http://localhost:9292 in a browser.

Something went wrong with that request. Please try again.