{"id":18544497,"url":"https://github.com/instructure/ic-autocomplete","last_synced_at":"2025-04-09T19:30:45.538Z","repository":{"id":15237531,"uuid":"17966342","full_name":"instructure/ic-autocomplete","owner":"instructure","description":"accessible ember autocomplete component","archived":false,"fork":false,"pushed_at":"2014-09-05T20:09:59.000Z","size":2291,"stargazers_count":57,"open_issues_count":17,"forks_count":22,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-24T10:49:48.989Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/instructure.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-21T02:55:48.000Z","updated_at":"2018-07-19T03:27:24.000Z","dependencies_parsed_at":"2022-08-04T02:45:13.678Z","dependency_job_id":null,"html_url":"https://github.com/instructure/ic-autocomplete","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instructure%2Fic-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instructure%2Fic-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instructure%2Fic-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instructure%2Fic-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/instructure","download_url":"https://codeload.github.com/instructure/ic-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247574085,"owners_count":20960496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T20:16:42.761Z","updated_at":"2025-04-09T19:30:44.861Z","avatar_url":"https://github.com/instructure.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ic-autocomplete\n===============\n\n[![Build Status](https://travis-ci.org/instructure/ic-autocomplete.png?branch=master)](https://travis-ci.org/instructure/ic-autocomplete)\n\n[WAI-ARIA][wai-aria] accessible autocomplete component (combobox) for [Ember.js][ember].\n\nDemo\n----\n\nhttp://instructure.github.io/ic-autocomplete\n\nInstallation\n------------\n\n```sh\n$ npm install ic-autocomplete\n```\n\nor ...\n\n```sh\n$ bower install ic-autocomplete\n```\n\nor just grab your preferred distribution from `dist/`.\n\nThen include the script(s) into your application:\n\n### npm+browserify\n\n`require('ic-autocomplete')`\n\n### amd\n\nRegister `ic-autocomplete` as a [package][rjspackage], then:\n\n`define(['ic-autocomplete'], ...)`\n\n### named-amd\n\nYou ought to know what you're doing if this is the case.\n\n### globals\n\n`\u003cscript src=\"bower_components/ic-styled/main.js\"\u003e\u003c/script\u003e`\n`\u003cscript src=\"bower_components/ic-autocomplete/dist/globals/main.js\"\u003e\u003c/script\u003e`\n\n{{ic-autocomplete}} Usage\n------------------\n\n```html\n{{#ic-autocomplete\n\n  \u003c!-- like other input types, `value` is two-way bound to `state` --\u003e\n  value=state\n\n  \u003c!--\n    you are responsible to filter the items, you might want to do\n    ajax, or client-side, or match both ids and labels of options (like\n    UT and Utah).\n\n    Map `on-input` to an action on your controller that is called when\n    the user types\n  --\u003e\n  on-input=\"filterStates\"\n\n  \u003c!-- \n    When the user makes a selection, this action is sent, which is a\n    great opportunity to reset your data so the list is fully populated\n    when the user opens the menu again\n  --\u003e\n  on-select=\"selectState\"\n\n  placeholder=\"Pick a state\"\n}}\n\n  \u003c!--\n    inside the autocomplete you should iterate some list of data, this\n    is the data you should filter in your `on-input` handler. So as the\n    user types, the data changes.\n  --\u003e\n    {{#each filteredStates}}\n      \u003c!-- finally create autocomplete-options with a value and label --\u003e\n      {{#ic-autocomplete-option value=id label=name}}\n        {{name}}\n      {{/ic-autocomplete-option}}\n    {{else}}\n      \u003cdiv\u003eNo results\u003c/div\u003e\n    {{/each}}\n{{/ic-autocomplete}}\n```\n\nAnd the JavaScript:\n\n```js\nApp.ApplicationController = Ember.Controller.extend({\n\n  actions: {\n    // the `on-input` actions sends the autocomplete component as the\n    // first argument, and the search term the user entered as the\n    // second\n    filterStates: function(autocomplete, term) {\n      // then we simply set the filteredStates, our `{{#each}}` will\n      // respond and we'll get a new set of `ic-autocomplete-option`s\n      this.set('filteredStates', this.filterStatesBy(term));    \n    },\n\n    filterWithXHR: function(autocomplete, term) {\n      // you could do something like this too:\n      ic.ajax.request('user_search?term='+term).then(function(states) {\n        this.set('filteredStates', response.states);\n      }.bind(this));\n    }\n  },\n\n  states: [{label: 'Utah', id: 'UT'}, {label: 'Illinois', id: 'IL'}],\n\n  filterStatesBy: function(term) {\n    var term = this.get('stateFilterTerm');\n    if (term == '') return this.get('states');\n    var filter = new RegExp('^'+term, 'i');\n    return this.get('states').filter(function(state) {\n      // filtering is up to you because you might want to do something\n      // awesome like this, searching on name and id\n      return filter.test(state.name) || filter.test(state.id);\n    });\n  }\n\n});\n```\n\nContributing\n------------\n\n```sh\n$ git clone \u003cthis repo\u003e\n$ npm install\n$ npm test\n# during dev\n$ broccoli serve\n# localhost:4200/globals/main.js instead of dist/globals/main.js\n# new tab\n$ karma start\n```\n\nMake a new branch, send a pull request, squashing commits into one\nchange is preferred.\n\n  [rjspackage]:http://requirejs.org/docs/api.html#packages\n  [ember]:http://emberjs.com\n  [wai-aria]:http://www.w3.org/TR/wai-aria/roles#combobox\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstructure%2Fic-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finstructure%2Fic-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstructure%2Fic-autocomplete/lists"}