https://github.com/instructure/ic-autocomplete

accessible ember autocomplete component
https://github.com/instructure/ic-autocomplete

Last synced: 7 days ago
JSON representation

accessible ember autocomplete component

• Host: GitHub
• URL: https://github.com/instructure/ic-autocomplete
• Owner: instructure
• License: mit
• Created: 2014-03-21T02:55:48.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-09-05T20:09:59.000Z (about 10 years ago)
• Last Synced: 2024-10-09T21:42:26.154Z (about 1 month ago)
• Language: JavaScript
• Size: 2.18 MB
• Stars: 57
• Watchers: 11
• Forks: 22
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE

Awesome Lists containing this project

README

        
ic-autocomplete

===============

[![Build Status](https://travis-ci.org/instructure/ic-autocomplete.png?branch=master)](https://travis-ci.org/instructure/ic-autocomplete)

[WAI-ARIA][wai-aria] accessible autocomplete component (combobox) for [Ember.js][ember].

Demo

----

http://instructure.github.io/ic-autocomplete

Installation

------------

```sh

$ npm install ic-autocomplete

```

or ...

```sh

$ bower install ic-autocomplete

```

or just grab your preferred distribution from `dist/`.

Then include the script(s) into your application:

### npm+browserify

`require('ic-autocomplete')`

### amd

Register `ic-autocomplete` as a [package][rjspackage], then:

`define(['ic-autocomplete'], ...)`

### named-amd

You ought to know what you're doing if this is the case.

### globals

``

``

{{ic-autocomplete}} Usage

------------------

```html

{{#ic-autocomplete

  

  value=state

  

  on-input="filterStates"

  

  on-select="selectState"

  placeholder="Pick a state"

}}

  

    {{#each filteredStates}}

      

      {{#ic-autocomplete-option value=id label=name}}

        {{name}}

      {{/ic-autocomplete-option}}

    {{else}}

      
No results

    {{/each}}

{{/ic-autocomplete}}

```


And the JavaScript:

```js

App.ApplicationController = Ember.Controller.extend({

  actions: {

    // the `on-input` actions sends the autocomplete component as the

    // first argument, and the search term the user entered as the

    // second

    filterStates: function(autocomplete, term) {

      // then we simply set the filteredStates, our `{{#each}}` will

      // respond and we'll get a new set of `ic-autocomplete-option`s

      this.set('filteredStates', this.filterStatesBy(term));    

    },

    filterWithXHR: function(autocomplete, term) {

      // you could do something like this too:

      ic.ajax.request('user_search?term='+term).then(function(states) {

        this.set('filteredStates', response.states);

      }.bind(this));

    }

  },

  states: [{label: 'Utah', id: 'UT'}, {label: 'Illinois', id: 'IL'}],

  filterStatesBy: function(term) {

    var term = this.get('stateFilterTerm');

    if (term == '') return this.get('states');

    var filter = new RegExp('^'+term, 'i');

    return this.get('states').filter(function(state) {

      // filtering is up to you because you might want to do something

      // awesome like this, searching on name and id

      return filter.test(state.name) || filter.test(state.id);

    });

  }

});

```

Contributing

------------

```sh

$ git clone 

$ npm install

$ npm test

# during dev

$ broccoli serve

# localhost:4200/globals/main.js instead of dist/globals/main.js

# new tab

$ karma start

```

Make a new branch, send a pull request, squashing commits into one

change is preferred.

  [rjspackage]:http://requirejs.org/docs/api.html#packages

  [ember]:http://emberjs.com

  [wai-aria]:http://www.w3.org/TR/wai-aria/roles#combobox