{"id":13481020,"url":"https://github.com/oferh/ng2-completer","last_synced_at":"2025-10-05T05:30:28.122Z","repository":{"id":57096032,"uuid":"54006354","full_name":"oferh/ng2-completer","owner":"oferh","description":"Angular 2 autocomplete component","archived":true,"fork":false,"pushed_at":"2020-08-28T14:05:27.000Z","size":55938,"stargazers_count":347,"open_issues_count":145,"forks_count":172,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-01-21T09:42:41.284Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://oferh.github.io/ng2-completer/","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/oferh.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}},"created_at":"2016-03-16T06:23:56.000Z","updated_at":"2024-11-07T05:53:35.000Z","dependencies_parsed_at":"2022-08-22T23:10:29.380Z","dependency_job_id":null,"html_url":"https://github.com/oferh/ng2-completer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oferh%2Fng2-completer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oferh%2Fng2-completer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oferh%2Fng2-completer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oferh%2Fng2-completer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oferh","download_url":"https://codeload.github.com/oferh/ng2-completer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235365124,"owners_count":18978306,"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-07-31T17:00:47.765Z","updated_at":"2025-10-05T05:30:27.352Z","avatar_url":"https://github.com/oferh.png","language":"TypeScript","funding_links":[],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","Uncategorized"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Uncategorized"],"readme":"# ng2-completer\n\nAuto complete component for Angular 2.\n\nThis component is based on [angucomplete-alt](https://github.com/ghiden/angucomplete-alt)\n\nClick for [demo](http://oferh.github.io/ng2-completer/) or [plunk](https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview)\n\n## Help needed\nI don't use this library much anymore and don't have time to properly maintain it.\nIf you are currently using ng2-completer and interested to maintain it please let me know!\n\n## Installation\n\n```sh\nnpm install ng2-completer --save\n```\n\n## Usage\n\nThe module you want to use ng2-completer in must import `Ng2CompleterModule` and `FormsModule` (to use the ngModel\ndirective on ng2-completer).  `Ng2CompleterModule` provides the `CompleterService`, and declares the `ng2-completer`\ndirective.\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FormsModule } from \"@angular/forms\";\nimport { HttpClientModule } from \"@angular/common/http\";\nimport { AppComponent } from './app.component';\nimport { Ng2CompleterModule } from \"ng2-completer\";\n\n\n@NgModule({\n  imports: [\n      BrowserModule,\n      FormsModule,\n      HttpClientModule,\n      Ng2CompleterModule,\n  ],\n  declarations: [ AppComponent ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\nAdd ng2-completer to your component and create a data source:\n\n```ts\nimport { Component } from '@angular/core';\nimport { CompleterService, CompleterData } from 'ng2-completer';\n\n@Component({\n  selector: 'my-component',\n  template: `\u003ch1\u003eSearch color\u003c/h1\u003e\n            \u003cng2-completer [(ngModel)]=\"searchStr\" [datasource]=\"dataService\" [minSearchLength]=\"0\"\u003e\u003c/ng2-completer\u003e\n            \u003ch1\u003eSearch captain\u003c/h1\u003e\n            \u003cng2-completer [(ngModel)]=\"captain\" [datasource]=\"captains\" [minSearchLength]=\"0\"\u003e\u003c/ng2-completer\u003e`\n})\nexport class MyComponent {\n\n  protected searchStr: string;\n  protected captain: string;\n  protected dataService: CompleterData;\n  protected searchData = [\n    { color: 'red', value: '#f00' },\n    { color: 'green', value: '#0f0' },\n    { color: 'blue', value: '#00f' },\n    { color: 'cyan', value: '#0ff' },\n    { color: 'magenta', value: '#f0f' },\n    { color: 'yellow', value: '#ff0' },\n    { color: 'black', value: '#000' }\n  ];\n  protected captains = ['James T. Kirk', 'Benjamin Sisko', 'Jean-Luc Picard', 'Spock', 'Jonathan Archer', 'Hikaru Sulu', 'Christopher Pike', 'Rachel Garrett' ];\n\n  constructor(private completerService: CompleterService) {\n    this.dataService = completerService.local(this.searchData, 'color', 'color');\n  }\n}\n```\n\nng2-completer uses [rxjs](https://github.com/Reactive-Extensions/RxJS) stream as data sources.\nThere are 2 ready made data sources that can be used to fetch local and remote data but it's also possible to provide\na custom source that generates a stream of items.\n\n### System.js configuration\n\nAdd the following to `System.js` map configuration:\n```ts\n   var map = {\n       ...\n       'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js'\n   }\n```\n\n\n\n## API\n\n### ng2-completer component\n\n|Attribute|Description|Type|Required|Default|\n|:---    |:---        |:--- |:---      |:--- |\n|datasource|Autocomplete list data source can be an array of strings or a URL that results in an array of strings or a CompleterData object|Array\\\u003cstring\\\u003e\\|string\\|CompleterData|Yes||\n|dataService|**Deprecated**  use `datasource` instead. Autocomplete list data source.|CompleterData|Yes||\n|ngModel| see the angular [forms API](https://angular.io/docs/js/latest/guide/forms.html).|string|Yes||\n|autoMatch|Auto select an item if it is the only result and it is an exact match of the search text.|boolean|No|false\n|autofocus|Set input focus when the page loads|boolean|No|false\n|clearUnselected|Clear the input on blur if not selected.|boolean|No|false|\n|clearSelected|Clear the input when a result is selected.|boolean|No|false|\n|disableInput|If true disable the input field.|boolean|No|false|\n|fieldTabindex|Set the `tabIndex` of the input.|number|No||\n|initialValue|Initial value for the component. Value is parsed using: titleField, descriptionField and imageField and used as selected value|any|No||\n|inputId|`id` attribute of the input element.|string|No||\n|inputName|`name` attribute of the input element.|string|No||\n|inputClass| `class` attribute of the input element.|string|No||\n|matchClass|CSS class to apply for matching part of the title and description.|string|No||\n|maxChars|Maximal number of characters that the user can type in the component.|number|No|524288|\n|minSearchLength|Minimal number of characters required for searching.|number|No|3|\n|overrideSuggested|If true will override suggested and set the model with the value in the input field.|boolean|No|false|\n|openOnFocus|If true will open the dropdown and perform search when the input gets the focus.|boolean|No|false|\n|openOnClick|If true will open and close the dropdown by click.|boolean|No|false|\n|selectOnFocus|If true will select the input text upon focus.|boolean|No|false|\n|selectOnClick|If true will select the input text by click.|boolean|No|false|\n|fillHighlighted|If true will set the model with the value in the input field when item is highlighted.|boolean|No|true|\n|pause|Number of msec. to wait before searching.|number|No|250|\n|placeholder|Placeholder text for the search field.|string|No||\n|textNoResults|Text displayed when the search returned no results. if the string is falsy it won't be displayed|string|No|\n|textSearching|Text displayed while search is active. if the string is falsy it won't be displayed|string|No|Searching...|\n|autoHighlight|Automatically highlight the best matching search result when the input changes. the \"best match\" is selected by: exact match, starts with and finally includes|boolean|No|false|\n\n### ng2-completer events\n\n|Name|Description|Type|\n|:---    |:---        |:--- |\n|selected|emitted when an item is selected.|(selected: CompleterItem): void|\n|highlighted|emitted when an item is highlighted.|(highlighted: CompleterItem): void|\n|focus|emitted when the input gets focus|(): void|\n|blur|emitted when the input looses focus|(): void|\n|opened|emitted when the dropdown is opened or closed|(isOpen: boolean): void|\n|keyup|emitted when the input emits keyup|(event: any): void|\n|keydown|emitted when the input emits keydown|(event: any): void|\n\n### ng2-completer methods\n\n|Method|Description|Parameters|\n|:---    |:---        |:--- |\n|open()|Open the dropdown| |\n|close()|Close the dropdown| |\n|focus()|Set the focus to the completer input| |\n|blur()|Remove the focus from the completer input| |\n|isOpen()|Returns the state of the dropdown| |\n\n### Local data\n\nCreate local data provider by calling `CompleterService.local`.\n\n#### Parameters\n\n|Name|Type|Description|Required|\n|:---|:---|:---       |:---    |\n|data|any[] \\| Observable\u003cany[]\u003e|A JSON array with the data to use or an Observable that emits one|Yes|\n|searchFields|string|Comma separated list of fields to search on. Fields may contain dots for nested attributes; if empty or null all data will be returned.|Yes|\n|titleField|string|Name of the field to use as title for the list item.|Yes|\n\n#### Attributes\n|Name|Type|Description|\n|:---|:---|:---       |\n|descriptionField|string|Name of the field to use as description for the list item.|\n|imageField|string|Name of the field to use as image url for the list item.|\n\n### Remote data\n\nCreate remote data provider by calling `CompleterService.remote`.\n\n#### Parameters\n\n|Name|Type|Description|Required|\n|:---|:---|:---       |:---    |\n|url|string|Base url for the search|Yes|\n|searchFields|string|Comma separated list of fields to search on. Fields may contain dots for nested attributes; if empty or null all data will be returned.|Yes|\n|titleField|string|Name of the field to use as title for the list item.|Yes|\n\n#### Attributes\n\n|Name|Type|Description|\n|:---|:---|:---       |\n|descriptionField|string|Name of the field to use as description for the list item.|\n|imageField|string|Name of the field to use as image url for the list item.|\n|urlFormater|(term: string) =\u003e string|Function that get's the searchterm and returns the search url before each search.|\n|dataField|string|The field in the response that includes the data.|\n|requestOptions|RequestOptions (@angular/common/http)|HTTP request options that should be sent with the search request.|\n\n### CSS classes\n\n* `.completer-holder`\n* `.completer-input`\n* `.completer-dropdown-holder`\n* `.completer-dropdown`\n* `.completer-searching`\n* `.completer-no-results`\n* `.completer-row`\n* `.completer-image-holder`\n* `.completer-image`\n* `.completer-image-default`\n* `.completer-title`\n* `.completer-description`\n* `.completer-list-item-holder`\n* `.completer-list-item`\n* `.completer-selected-row`\n\n## Credits\n\n* This product uses the TMDb API but is not endorsed or certified by TMDb\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foferh%2Fng2-completer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foferh%2Fng2-completer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foferh%2Fng2-completer/lists"}