ember-autosuggest
ember-autosuggest copied to clipboard
ember-autosuggest will suggest names from a bound list.
THIS REPO HAS BEEN UPGRADED TO AN EMBER-CLI ADDON
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 thesource
list that will be used to auto suggest, the default isname
.
{{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 is1
.
{{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|}}{{/auto-suggest}} ```
- The above declaration will result in the following markup:
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
-
git clone https://github.com/dagda1/ember-autosuggest.git
-
bundle
-
bundle exec rake dist
-
cp dist/ember-autosuggest.js myapp/
-
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.