{"maintainers":[{"email":"contact@akveo.com","name":"anonymous"}],"keywords":["angular","autcomplete","typeahead","word completion","ng2"],"dist-tags":{"latest":"9.0.1"},"author":{"name":"Ofer Herman","email":"oferhe@gmail.com"},"description":"Temporary fork of https://github.com/oferh/ng2-completer to fix build issue","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: `<h1>Search color</h1>\n            <ng2-completer [(ngModel)]=\"searchStr\" [datasource]=\"dataService\" [minSearchLength]=\"0\"></ng2-completer>\n            <h1>Search captain</h1>\n            <ng2-completer [(ngModel)]=\"captain\" [datasource]=\"captains\" [minSearchLength]=\"0\"></ng2-completer>`\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\\<string\\>\\|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<any[]>|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) => 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","repository":{"url":"git+https://github.com/oferh/ng2-completer.git","type":"git"},"bugs":{"url":"https://github.com/oferh/ng2-completer/issues"},"license":"MIT","versions":{"9.0.1":{"name":"@akveo/ng2-completer","version":"9.0.1","keywords":["angular","autcomplete","typeahead","word completion","ng2"],"author":{"name":"Ofer Herman","email":"oferhe@gmail.com"},"license":"MIT","_id":"@akveo/ng2-completer@9.0.1","maintainers":[{"name":"anonymous","email":"contact@akveo.com"}],"contributors":[{"name":"Martin Donadieu","email":"martindonadieu@gmail.com"},{"name":"Andrew Rumm","email":"rayz@rayz.ru"}],"homepage":"https://github.com/oferh/ng2-completer/issues/447","bugs":{"url":"https://github.com/oferh/ng2-completer/issues"},"dist":{"shasum":"49d2914fb62b78cc6ae5aed861ea7fa4ed5863d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@akveo/ng2-completer/-/ng2-completer-9.0.1.tgz","fileCount":32,"integrity":"sha512-iACL0heOUmGV1GBKD3srwBJMFLZykld1MiTDvmbgEEXMhavp0UA45GdNsv7BBKI9XauuFKpOqHLlC+fT6DLGAQ==","signatures":[{"sig":"MEQCID2tjDO+GqlQFaUaZwtLKFa+S/ibWHHIFdqNdEe70zNIAiBAzR+H6rxlt70C0qfcRxhpIjjWp1dIg1sjbo1rrL/XGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeIeQCRA9TVsSAnZWagAAi54P/i0sZOGwtgOzeepevZQ3\ndepLdjz6pZqshMj9PWEJSVaOP6gAJspfvK0HirAigQx2KQP0WY2pWoMKixo6\naaHf4zk0fpp6q0SXzk343GvDbFz9axN1efy64w/zatPtjZrOEMAUGeDbeme1\nuyomPu8EmuCWAMS8AQYiVU6Dvsxo7TQVkqJnjj0QDNoeGIJDInmtWRili0Hn\nH34LoBXEyw6pYK6vpp2Lg1N3DrjVei9LiHMe9qpl8RkupoEzFhaoCoeNdzyK\no4lzkfdhrr7/2pKp+aYbCbNDCAxfqFPcV/XrvT4QVKXo61z5UirUegNlj3oe\npbsSyOgpUOHQj1QfqDKqpJnjGx3vEA19CKu45JvmdrSWRVMJIkOz4Fx8CCrE\nyb11DTvYyOjoi418BeLfTS4kYfbml8F5oc1Y4o+LDtTLf4M1J/7sr3XcOPdo\nv5bN0K2H/wpcpej2WfyhHmpjH3jUk2O7VEs65Pr7fAjN3OD+SmYQjVfJno6K\n5njyWFBphIsFMv0FvihZlJkD//cknh63HaRuaDqfsaU5xAAX8hEvYZKTXNmE\noNt5tiVgpB/77Lh1D27mFk13O33qZ0lpc2ZJYc4kPd06rlEABOv4GeNCBE5P\nIheEGVMQGiWIFFBNDI5yS0EHsAsFDuuNXjRwfsJ2DIfPVyYEq6lC25Sh77aH\neCBO\r\n=Ga8l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./bundles/ng2-completer.umd.js","es2015":"./esm2015/ng2-completer.js","module":"./esm5/ng2-completer.js","typings":"./ng2-completer.d.ts","_npmUser":{"name":"anonymous","email":"contact@akveo.com"},"repository":{"url":"git+https://github.com/oferh/ng2-completer.git","type":"git"},"_npmVersion":"6.13.6","description":"Temporary fork of https://github.com/oferh/ng2-completer to fix build issue","directories":{},"_nodeVersion":"12.14.1","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"rxjs":"^6.5.4","chalk":"^3.0.0","karma":"^4.4.1","rollup":"^1.31.0","tslint":"^6.0.0","core-js":"^3.6.4","shelljs":"^0.8.2","webpack":"^4.0.0","zone.js":"^0.10.2","gh-pages":"^2.2.0","codelyzer":"^5.2.1","cross-env":"^7.0.0","ts-loader":"^6.2.1","uglify-js":"^3.1.6","raw-loader":"^4.0.0","typescript":"~3.7.5","@types/node":"^13.7.0","html-loader":"^0.5.1","webpack-cli":"^3.0.3","@angular/cdk":">= 6.0.0","jasmine-core":"^3.1.0","@angular/core":">= 6.0.0","karma-jasmine":"^3.1.0","karma-webpack":"^4.0.2","ngx-bootstrap":"^5.3.2","webpack-merge":"^4.1.0","@angular/forms":">= 6.0.0","@types/jasmine":"^3.5.3","@angular/common":">= 6.0.0","@angular/router":">= 6.0.0","reflect-metadata":"^0.1.10","to-string-loader":"^1.1.6","@angular/compiler":">= 6.0.0","@angular/material":">= 6.0.0","source-map-loader":"^0.2.4","@compodoc/compodoc":"^1.0.3","webpack-dev-server":"^3.1.4","@angular/animations":">= 6.0.0","copy-webpack-plugin":"^5.1.1","html-webpack-plugin":"^3.2.0","karma-spec-reporter":"^0.0.32","@angular/compiler-cli":">= 6.0.0","karma-chrome-launcher":"^3.1.0","rollup-plugin-license":"^0.13.0","karma-sourcemap-loader":"0.3.7","@angular/platform-server":">= 6.0.0","angular2-template-loader":"^0.6.2","rollup-plugin-sourcemaps":"^0.5.0","rollup-plugin-visualizer":"^3.3.1","@angular/platform-browser":">= 6.0.0","awesome-typescript-loader":"^5.0.0","@rollup/plugin-node-resolve":"^7.1.1","extract-text-webpack-plugin":"^4.0.0-beta.0","istanbul-instrumenter-loader":"^3.0.0","karma-coverage-istanbul-reporter":"^2.0.0","@angular/platform-browser-dynamic":">= 6.0.0"},"peerDependencies":{"@angular/core":">= 6.0.0","@angular/forms":">= 6.0.0","@angular/common":">= 6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng2-completer_9.0.1_1584957327461_0.8453430557110133","host":"s3://npm-registry-packages"}}},"name":"@akveo/ng2-completer","time":{"created":"2020-03-23T09:55:27.155Z","modified":"2026-02-20T14:04:12.921Z","9.0.1":"2020-03-23T09:55:27.702Z"},"contributors":[{"name":"Martin Donadieu","email":"martindonadieu@gmail.com"},{"name":"Andrew Rumm","email":"rayz@rayz.ru"}],"readmeFilename":"README.md","homepage":"https://github.com/oferh/ng2-completer/issues/447"}