{"id":16241390,"url":"https://github.com/rhostem/ng2-simple-autocomplete","last_synced_at":"2025-03-19T17:30:20.815Z","repository":{"id":57310814,"uuid":"95518469","full_name":"rhostem/ng2-simple-autocomplete","owner":"rhostem","description":"ng2-simple-autocomplete","archived":false,"fork":false,"pushed_at":"2017-12-13T04:03:04.000Z","size":2018,"stargazers_count":6,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-28T19:55:55.655Z","etag":null,"topics":["angular","autocomplete"],"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/rhostem.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":"2017-06-27T04:46:06.000Z","updated_at":"2023-12-01T07:41:09.000Z","dependencies_parsed_at":"2022-09-11T20:51:23.722Z","dependency_job_id":null,"html_url":"https://github.com/rhostem/ng2-simple-autocomplete","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhostem%2Fng2-simple-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhostem%2Fng2-simple-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhostem%2Fng2-simple-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhostem%2Fng2-simple-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rhostem","download_url":"https://codeload.github.com/rhostem/ng2-simple-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244006277,"owners_count":20382443,"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","autocomplete"],"created_at":"2024-10-10T14:07:28.614Z","updated_at":"2025-03-19T17:30:20.430Z","avatar_url":"https://github.com/rhostem.png","language":"JavaScript","readme":"# ng2-simple-autocomplete\n\n## \u003cspan style=\"color:red\"\u003e\u0026#9888;\u003c/span\u003e This project is not maintained for now.\n\nThere is serveral problems to use this component in latest Angular version and Angular CLI. (this component is developed in Angular 4.1.2). I don't have a plan to update this component for now.\n\n---\n\n## Features\n\nng2-simple-autocomplete is autocomplete component for Angular. It mainly focuses on *asynchronous* search result from remote data. But it also supports static dataset.\n\n- Variable properties and event bindings.\n- 2-way binding.\n- Selection history.\n- Auto filtering of static list.\n- Custom styling.\n\n## Working example\n\n[https://rhostem.github.io/ng2-simple-autocomplete](https://rhostem.github.io/ng2-simple-autocomplete)\n\n## Installation\n\n```bash\nnpm install --save ng2-simple-autocomplete\n```\n\n```bash\nyarn add ng2-simple-autocomplete\n```\n\nAnd add it to your Angular Module for use.\n\n```javascript\nimport { Ng2SimpleAutocomplete } from 'ng2-simple-autocomplete';\n\n@NgModule({\n  declarations: [\n    Ng2SimpleAutocomplete,\n  ],\n})\nexport class AppModule {\n}\n```\n\n\n## Usage sample\n\n### Dynamic dataset\n\n```html\n\u003cng2-simple-autocomplete\n  [(search)]=\"keyword\"\n  [searchResults]=\"remoteData\"\n  (onSelect)=\"onSelectItem($event)\"\n  (onChange)=\"onChangeInput($event)\"\n  [style]=\"inputStyle\"\n\u003e\u003c/ng2-simple-autocomplete\u003e\n```\n\n```javascript\nimport { AutoCompleteItem, AutocompleteStyle } from 'ng2-simple-autocomplete';\n\nclass TestComponent {\n  keyword: string;\n  remoteData: AutoCompleteItem[] = [];\n  inputStyle: AutocompleteStyle = {\n    'width': '400px',\n    'color': 'blue'\n  };\n\n  onSelectItem(item: AutoCompleteItem) {\n    // do something with selected item\n  }\n\n  onChangeInput(search: string) {\n    // fetch remote data from here\n    // And reassign the 'remoteData' which is binded to 'searchResults' property.\n  }\n}\n```\n\nBasically, a dataset binded to the autocomplete component does not change unless it is changed from parent component. So user has to change it manually when search input changes.\n\n### Static dataset\n\n```html\n\u003cng2-simple-autocomplete\n  [(search)]=\"keyword\"\n  [searchResults]=\"staticData\"\n  (onSelect)=\"onSelectItem($event)\"\n  [isStatic]=\"true\"\n\u003e\u003c/ng2-simple-autocomplete\u003e\n```\n\n```javascript\nimport { AutoCompleteItem } from 'ng2-simple-autocomplete';\n\nclass TestComponent {\n  keyword: string;\n  staticData: AutoCompleteItem[] = [];\n\n  onSelectItem(item: AutoCompleteItem) {\n    // do something with selected item\n  }\n}\n```\n\nIf `isStatic` property is set as `true`, then the dataset is automatically filtered when input changes.\n\n## API\n\n### Interface\n\n#### `interface AutoCompleteItem`\n\nShape of object in `searchResults` array.\n\n```javascript\ninterface AutoCompleteItem {\n  value: any;\n  text: string;\n  markup?: string;\n  isFocus?: boolean;\n}\n```\n\n`value` and `text` are mandatory. If `markup` property is specified, component uses it rather than text. So user can customize a result text with HTML.\n\n\n####  `interface AutocompleteStyle`\n\nShape of object for style customizing.\n\n```javascript\ninterface AutocompleteStyle {\n  'width'?: string;\n  'color'?: string;\n  'font-size'?: string;\n  'border-radius'?: string;\n  'border-color'?: string;\n  'height'?: string;\n  'line-height'?: string;\n  'max-height-of-list'?: string;\n}\n```\n\n### Properties\n\n#### `search: string`\n\nText of input field. Use 'banana-in-box' notation for 2-way binding.\n\n```html\n\u003cng2-simple-autocomplete\n  [(search)]=\"keyowrd\"\n\u003e\u003c/ng2-simple-autocomplete\u003e\n```\n\n#### `searchResults: AutoCompleteItem[]`\n\nList of autocomplete item.\n\n\n#### `style: AutocompleteStyle`\n\nStyle object for customizing input box style. Customizable CSS property is predefined and *another property will be ignored*. Property and default value is like below.\n\n```javascript\n@Input() style: AutocompleteStyle = {\n  'width': '100%',\n  'color': 'inherit',\n  'font-size': 'inherit',\n  'border-radius': '2px',\n  'border-color': '#ddd',\n  'height': '35px',\n  'line-height': '35px',\n  'max-height-of-list': '20em', // max-height property of list box\n};\n```\n\n#### `classNames: string`\n\nCSS classes for styling. Class names for this property **must be** declared in global area(ie. declare or import at index.html). If your classes are declared in component context, that won't work.\n\n#### `onChangeInput: EventEmitter`\n\nIt emits `search` string and is invoked when input is changed.\n\n\n#### `onSelect: EventEmitter`\n\nIt emits selected `AutocompleteItem` object and is invoked when user selects items in search results or history list.\n\nUser can select item by mouse click or keyboard up/down and enter.\n\n\n#### `onReset: EventEmitter`\n\nInvoked when user click 'X' button at right side of input box. It emits nothing.\n\n\n#### `isStatic: boolean` (default: `false`)\n\nIf want to bind static list for `searchResults` property, then set it as true. Then component will automatically filter the list when input changes.\n\n\n#### `placeholder: string` (default: `search keyword`)\n\nSame as that of `input` element of HTML.\n\n\n#### `noResultText: string` (default: `false`)\n\nNotificiation text visible when there is no search results with input text.\n\n\n#### `historyId: string`\n\nWhen valid history id is given, then component stores selected item to local storage of user's browser.\n\nIt is **'selection item'** history. Not 'search keyword' history. So it stores `AutocompleteResult` object to history. And `onSelect` event is invoked when user selects history item also.\n\nHistory is visible when `search` is empty and there is at least 1 history item.\n\nIf *same history id*s are used over several component, it *shares same history* list.\n\n#### `historyHeading: string` (default: `Recently selected`)\n\nText ahead of history list.\n\nIf you want to remove this heading, bind `null` value for this property.\n\n\n#### `maxHistory: number` (default: `15`)\n\nMaximum number of items in the history list.\n\n\n#### `autoFocusOnFirst: boolean` (default: `true`)\n\nFirst item is automatically highlighted after result list has displayed. So user can select it directly by pressing enter key after searching.\n\n\n#### `resetOnDelete: boolean` (default: `false`)\n\nInvoke `onReset` event when user deletes input keyword by pressing backspace key.\n\n\n#### `resetOnFocusOut: boolean` (default: `false`)\n\nInvoke `onReset` event when input element in component losts focus.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhostem%2Fng2-simple-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frhostem%2Fng2-simple-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhostem%2Fng2-simple-autocomplete/lists"}