{"id":20332325,"url":"https://github.com/liuy97/ng2-input-autocomplete","last_synced_at":"2025-04-11T21:32:58.450Z","repository":{"id":13918160,"uuid":"75338663","full_name":"liuy97/ng2-input-autocomplete","owner":"liuy97","description":"angular2 input autocomplete","archived":false,"fork":false,"pushed_at":"2022-12-09T05:15:53.000Z","size":5383,"stargazers_count":7,"open_issues_count":18,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-29T09:25:16.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://liuy97.github.io/ng2-input-autocomplete/","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/liuy97.png","metadata":{"files":{"readme":"README.MD","changelog":null,"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":"2016-12-01T22:31:56.000Z","updated_at":"2020-08-03T13:34:13.000Z","dependencies_parsed_at":"2023-01-13T17:41:24.777Z","dependency_job_id":null,"html_url":"https://github.com/liuy97/ng2-input-autocomplete","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuy97%2Fng2-input-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuy97%2Fng2-input-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuy97%2Fng2-input-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuy97%2Fng2-input-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liuy97","download_url":"https://codeload.github.com/liuy97/ng2-input-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994136,"owners_count":21030050,"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-14T20:26:02.195Z","updated_at":"2025-04-11T21:32:58.415Z","avatar_url":"https://github.com/liuy97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng2-input-autocomplete\n\n[![npm version](https://badge.fury.io/js/ng2-input-autocomplete.svg)](https://badge.fury.io/js/ng2-input-autocomplete)\n[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)\n[![Build Status](https://travis-ci.org/liuy97/ng2-input-autocomplete.svg?branch=master)](https://travis-ci.org/liuy97/ng2-input-autocomplete)\n\n#### Quick links\n[StackBlitz Template](https://stackblitz.com/edit/ng2-input-autocomplete)\n\nAngular2 input autocomplete\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ng2-input-autocomplete --save\n```\n\n## breaking changes from V1.0.0\n\nDirective name has been changed from autocomplete to input-autocomplete\n\n## Usage\n\nand then from your Angular `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import your library\nimport { AutocompleteModule } from 'ng2-input-autocomplete';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AutocompleteModule.forRoot()\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nOnce your library is imported, you can use its components and directives:\n\nThree input elements: **config**, **items**, **ngModel**\n\nconfig supports two properties: **placeholder** and  **sourceField** which is used to search.\nTwo optional properties: **class** for customized css style and **max** for the max number of items.\n\nTwo output events: **selectEvent** (when a item is selected) and **inputChangedEvent** (when users input)\n\n```xml\n\u003c!-- You can now use your library component in app.component.html --\u003e\n\u003ch1\u003e\n  String\n\u003c/h1\u003e\n\u003cinput input-autocomplete [items]=[\"a\", \"ab\"]\u003e\u003c/input\u003e\n  \u003ch2\u003eObjects:\u003c/h2\u003e\n  \u003cdiv\u003e\n    \u003cinput input-autocomplete [config]=\"config2\" [items]=\"items2\"\n      (inputChangedEvent)=\"onInputChangedEvent($event)\"\n      (selectEvent)=\"onSelect($event)\"\u003e\n  \u003c/div\u003e\n  \u003ch2\u003eWiki:\u003c/h2\u003e\n  \u003cdiv\u003e\n    \u003cinput input-autocomplete [items]=\"wikiItems\"\n      (inputChangedEvent)=\"search($event)\"\n      (selectEvent)=\"onSelect($event)\"\u003e\n  \u003c/div\u003e\n```\n\nin styles.css\n```css\n.test li.active {\n  width: 100%;\n  background-color: red!important;\n}\n\n.test li {\n  color: blue;\n}\n```\n\n```typescript\nexport class AppComponent  {\n  selectedItem: any = '';\n  inputChanged: any = '';\n  wikiItems: any[] = [];\n  items2: any[] = [{id: 0, payload: {label: 'Tom'}},\n    {id: 1, payload: {label: 'John'}},\n    {id: 2, payload: {label: 'Lisa'}},\n    {id: 3, payload: {label: 'Js'}},\n    {id: 4, payload: {label: 'Java'}},\n    {id: 5, payload: {label: 'c'}},\n    {id: 6, payload: {label: 'vc'}}\n  ];\n  config2: any = {'class': 'test', 'max': 2, 'placeholder': 'test', 'sourceField': ['payload', 'label']};\n\n  constructor(private service: WikipediaService) {}\n\n  onSelect(item: any) {\n    this.selectedItem = item;\n  }\n\n  onInputChangedEvent(val: string) {\n    this.inputChanged = val;\n  }\n\n  search (term: string) {\n    this.service.search(term).subscribe(e =\u003e this.wikiItems = e, error =\u003e console.log(error));\n  }\n}\n```\n\n**Note:** If you're using reactive forms, pass the `FormControl` into the input as a prop like `\u003cinput input-autocomplete [control]=\"formControl\"\u003e` for methods such as `setValue` or `reset` to work.\n\n## Development\n\n```bash\n$ npm run test\n```\n\n## License\n\nMIT © [liuy97](liuy97@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliuy97%2Fng2-input-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliuy97%2Fng2-input-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliuy97%2Fng2-input-autocomplete/lists"}