{"id":13481025,"url":"https://github.com/ng2-ui/auto-complete","last_synced_at":"2025-05-16T01:07:40.629Z","repository":{"id":8994846,"uuid":"60480286","full_name":"ng2-ui/auto-complete","owner":"ng2-ui","description":"Angular Auto Complete component and directive","archived":false,"fork":false,"pushed_at":"2024-10-10T14:47:55.000Z","size":15744,"stargazers_count":278,"open_issues_count":8,"forks_count":122,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-12T23:08:03.300Z","etag":null,"topics":["angular","angular-material","auto-complete","material-ui"],"latest_commit_sha":null,"homepage":"http://ng2-ui.github.io/auto-complete/","language":"TypeScript","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/ng2-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-05T20:43:13.000Z","updated_at":"2025-01-30T15:05:57.000Z","dependencies_parsed_at":"2024-09-23T07:07:47.217Z","dependency_job_id":"4b1c29d6-30cc-4564-81fa-2a7b7cbab968","html_url":"https://github.com/ng2-ui/auto-complete","commit_stats":{"total_commits":401,"total_committers":46,"mean_commits":8.717391304347826,"dds":0.5211970074812968,"last_synced_commit":"027e70aaaa2d351c834def089c5862cd9d67290d"},"previous_names":["ng2-ui/ng2-auto-complete"],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng2-ui%2Fauto-complete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng2-ui%2Fauto-complete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng2-ui%2Fauto-complete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng2-ui%2Fauto-complete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ng2-ui","download_url":"https://codeload.github.com/ng2-ui/auto-complete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"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":["angular","angular-material","auto-complete","material-ui"],"created_at":"2024-07-31T17:00:47.813Z","updated_at":"2025-05-16T01:07:35.621Z","avatar_url":"https://github.com/ng2-ui.png","language":"TypeScript","readme":"# Angular UI auto-complete\n\n[![npm downloads](https://img.shields.io/npm/dt/@ngui/auto-complete.svg)](https://www.npmjs.com/package/@ngui/auto-complete)\n[![npm version](https://img.shields.io/npm/v/@ngui/auto-complete.svg)](https://www.npmjs.com/package/@ngui/auto-complete)\n[![npm license](https://img.shields.io/npm/l/@ngui/auto-complete.svg)](https://www.npmjs.com/package/@ngui/auto-complete)\n[![GitHub issues](https://img.shields.io/github/issues/ng2-ui/auto-complete.svg)](https://github.com/ng2-ui/auto-complete/issues)\n\n### IMPORTANT: HELP NEEDED\n\nThe project need your help, any help for fixing bugs and improvements are welcome!\n\n## Install\n\n1. install `@ngui/auto-complete`\n\n        $ npm install @ngui/auto-complete --save\n\n2. import NguiAutoCompleteModule to your AppModule\n\n        import { NguiAutoCompleteModule } from '@ngui/auto-complete';\n        \n        @NgModule({\n          imports: [BrowserModule, FormsModule, NguiAutoCompleteModule],\n          declarations: [AppComponent],\n          providers: [HTTP_PROVIDERS],\n          bootstrap: [ AppComponent ]\n        })\n        export class AppModule { }\n\n## Usage it in your code\n\n1. As a component\n\n       \u003cngui-auto-complete [(ngModel)]=\"myData\" [source]=\"mySource\"\u003e\u003c/ngui-auto-complete\u003e\n\n2. As a directive\n\n       \u003cinput auto-complete [(ngModel)]=\"myData\" [source]=\"mySource\" /\u003e\n\nFor full example, please check `demo` directory to see the example of `app.module.ts` and `app.component.ts`.\n\n## Demo\n\nYou can look at different showcases for it here as [Component](https://ng2-ui.github.io/auto-complete/component-test) or [Directive](https://ng2-ui.github.io/auto-complete/directive-test).\n\n## attributes\n\nAll options are optional except `ngModel` and `source`\n\n* **`ngModel`**, any, variable that autocomplete result is assigned to\n* **`source`**, array or string, required. data source for dropdown list\n* **`auto-complete-placeholder`**, string, autocomplete input guide text\n* **`value-formatter`**, string or function variable name, custom value formatting function. e.g. `(id) value`, '`myValueFormatter`.\n\n       myValueFormatter(data: any): string {\n          return `(${data[id]}) ${data[value]}`;\n        }\n* **`list-formatter`**, string or function variable name, custom list formatting function. e.g.  `(key) name`, `myListFormatter`.\n\n       myListFormatter(data: any): string {\n          return `(${data[key]}) ${data[name]}`;\n       }\n\n  * **`path-to-data`**, string, e.g., `data.myList`, path to array data in http response\n  * **`min-chars, number`**, when source is remote data, the number of character to see drop-down list\n  * **`display-property-name`**, string, key name of text to show. default is `value`\n  * **`select-value-of`**, string, when selected, return the value of this key as a selected item\n  * **`blank-option-text`**, string, guide text to allow empty value to be selected as in empty value of `option` tag.\n  * **`no-match-found-text`**, string, guide text to show no result found.\n  * **`valueChanged`** / **`ngModelChange`**, callback function that is executed when a new drop-down is selected.\n    e.g. `(valueChanged)=\"myCallback($event)\"`\n  * **`customSelected`** callback function that is executed when a value selected not included in drop-down, so it will return the keyword used.\n    e.g. `(customSelected)=\"customCallback($event)\"`\n  * **`loading-text`**, text to be displayed when loading. Default, \"Loading\"\n  * **`loading-template`**, html markup that is to be rendered when loading. Default, null\n  * **`accept-user-input`** boolean, if `false` and does not match to source given, it goes back to the original value selected., If you don't event want user to type any, please use `readonly=\"readonly\"` to force user to select only from list. Default is `true`\n  * **`max-num-list`** number, maximum number of drop down list items. Default, unlimited\n  * **`tab-to-select`** boolean, if `true`, pressing \u003ckbd\u003eTab\u003c/kbd\u003e will set the value from the selected item before focus leaves the control. Default is `true`\n  * **`select-on-blur`** boolean, if `true`, `blur` event will set the value from the selected item before focus leaves the control. Default is `false`\n  * **`match-formatted`** boolean, if `true`, keyword will be matched against list values formatted with `list-formatter`, instead of raw objects. Default is `false`\n  * **`auto-select-first-item`**, boolean, if `true`, the first item of the list is automatically selected, if `false`, user must select manually an item. Default is `false`\n  * **`open-on-focus`**, boolean, if `false` drop down won't open on a focus event, . Default is `true`\n  * **`close-on-focusout`**, boolean, if `false` drop down will close on a focusout event, . Default is `true`\n  * **`re-focus-after-select property`**, boolean, if `false` an auto focus behavior after select (example: custom value on blur event or issue #276) is disabled . Default is `true`\n  * **`autocomplete`**, boolean, default `false`, if `true` remove the attribute `autocomplete=\"off\"` of the input.\n  * **`header-item-template`**, html markup to optionally create a non-selectable header row above the list of results. Default, null\n  * **`ignore-accents`**, boolean, default `true`, if `false` user input must match exactly with source given, including accents or diacritics\n\n## Below are plunks for different scenarios:\n\n**Template Driven Forms**\n\n* _ngModel_ http://plnkr.co/edit/3pB1Gx?p=preview\n\n**Reactive Forms**\n\n* _FormGroup_  http://plnkr.co/edit/2osUq6?p=preview\n  [issue #49](https://github.com/ng2-ui/auto-complete/issues/49)\n\n* _FormControl_ http://plnkr.co/edit/A5CW2e?p=preview\n  [issue #100](https://github.com/ng2-ui/auto-complete/issues/100)\n\n**Material Design**\n\n* _Example_ http://plnkr.co/edit/2YLDjX?p=preview\u0026open=app/app.component.ts\n\n**Observable Source**\n\n* _Example_ http://plnkr.co/edit/ExzNSh?p=preview\n\n**List Formatter Example**\n\n* _Example 1_ http://plnkr.co/edit/F9nrWp?p=preview\n* _Example 2 (With custom css)_ http://plnkr.co/edit/0QFYFHMmCAFmhbYAGQl7?p=preview\n\n## Contributors are welcomed\n\nThis module is only improved and maintained by contributors like you;\n\nAs a contributor, it's NOT required to be skilled in Javascript nor Angular.\nYou can contribute to the following;\n\n* Updating README.md\n* Making more and clearer comments\n* Answering issues and building FAQ\n* Documentation\n* Translation\n\nIn result of your active contribution, you will be listed as a core contributor\non https://ng2-ui.github.io, and a member of ng2-ui too.\n\nIf you are interested in becoming a contributor and/or a member of ng-ui,\nplease send me email to `allenhwkim AT gmail.com` with your GitHub id.\n\n## For Developers\n\n### To start\n\n    $ git clone https://github.com/ng2-ui/auto-complete.git\n    $ cd auto-complete\n    $ npm install\n    $ npm build-lib:watch\n    \n    $ # On different instance\n    \n    $ npm start\n\n### To publish\n\n    $ npm build-lib:prod\n    $ cd dist\n    $ npm publish\n\n### To build new docs version\n\n    $ npm build-docs\n\n### List of available npm tasks\n\n* `npm run` : List all available tasks\n* `npm start`: Run `demo` directory for development using `@angular/cli` with port 4200\n* `npm run lint`: Lint TypeScript code\n* `npm run build-lib:watch`: Build library in live watch mode for development\n* `npm run build-lib:prod`: Build library for publish using view engine (not Ivy renderer)\n* `npm run build-docs`: Build a new version for life demo got GitHub pages\n","funding_links":[],"categories":["Uncategorized","Third Party Components"],"sub_categories":["Uncategorized","Form Controls"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fng2-ui%2Fauto-complete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fng2-ui%2Fauto-complete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fng2-ui%2Fauto-complete/lists"}