{"id":13580430,"url":"https://github.com/sengirab/ngAutocomplete","last_synced_at":"2025-04-06T02:31:32.591Z","repository":{"id":22531850,"uuid":"96617886","full_name":"sengirab/ngAutocomplete","owner":"sengirab","description":"Light-weight autocomplete component for Angular.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:01:01.000Z","size":7487,"stargazers_count":52,"open_issues_count":28,"forks_count":23,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-21T07:18:31.874Z","etag":null,"topics":["angular","angular-component","angular2","angular4","angularjs","auto-complete","autocomplete","completion","dropdown","ng-auto-complete","ng-autocomplete","ng-dropdown","ng2","ng2-auto-complete","typescript"],"latest_commit_sha":null,"homepage":"","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/sengirab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-07-08T12:32:19.000Z","updated_at":"2023-12-01T07:10:19.000Z","dependencies_parsed_at":"2024-04-08T18:06:39.803Z","dependency_job_id":null,"html_url":"https://github.com/sengirab/ngAutocomplete","commit_stats":{"total_commits":85,"total_committers":7,"mean_commits":"12.142857142857142","dds":0.388235294117647,"last_synced_commit":"9c26bc48196783bd0395ffe09070b32c13b29499"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sengirab%2FngAutocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sengirab%2FngAutocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sengirab%2FngAutocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sengirab%2FngAutocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sengirab","download_url":"https://codeload.github.com/sengirab/ngAutocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247425989,"owners_count":20937049,"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-component","angular2","angular4","angularjs","auto-complete","autocomplete","completion","dropdown","ng-auto-complete","ng-autocomplete","ng-dropdown","ng2","ng2-auto-complete","typescript"],"created_at":"2024-08-01T15:01:51.213Z","updated_at":"2025-04-06T02:31:32.230Z","avatar_url":"https://github.com/sengirab.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# NgAutoComplete / Example\nLight-weight autocomplete component for Angular.\n\n[![Code Climate](https://codeclimate.com/github/sengirab/ngAutocomplete/badges/gpa.svg)](https://codeclimate.com/github/sengirab/ngAutocomplete)\n[![npm version](https://badge.fury.io/js/ng-auto-complete.svg)](https://badge.fury.io/js/ng-auto-complete)\n\n\nhttps://github.com/sengirab/ngAutocomplete\n\n![](https://raw.githubusercontent.com/sengirab/ngAutocomplete/master/demo.gif)\n\n# Installation\n\n`npm i ng-auto-complete --save`\n\n# Styling !Important\nFirst thing to note, i've created this package to be as simple as possible. That's why i don't include any styling,\nthis is so you could style it the way you want it.\n\nIf you like the styling i did for the example .gif shown above, you can copy it from [here.](https://github.com/sengirab/ngAutocomplete/blob/master/src/styles.css)\n### Classes\n- .ng-autocomplete-dropdown (.open .is-loading .is-async)\n- .ng-autocomplete-inputs\n- .ng-autocomplete-input\n- .ng-autocomplete-placeholder\n- .ng-autocomplete-dropdown-icon (.open)\n- .ng-dropdown (.open .is-initial-empty)\n- .dropdown-item (.active)\n\n\n# Responses !Important\n#### Response when selected\n```json\n\"{group: AutocompleteGroup, item: AutocompleteItem}\"\n```\n#### Response when cleared\n```json\n\"{group: AutocompleteGroup, item: null}\"\n```\nNote that when calling completer.ResetInput('completer'), this will clear the input. This means that the\ncompleter will emit `{group: AutocompleteGroup, item: null}`. If your listening to this within your component\nkeep in mind that each clear the item will be null\n\nThe input will also emit \"null\" when the input reaches a length of `\u003c= 0`.\n\n\n# Usage\n\n#### app.module.ts\n```typescript\nimport {BrowserModule} from \"@angular/platform-browser\";\nimport {NgModule} from \"@angular/core\";\nimport {FormsModule} from \"@angular/forms\";\nimport {HttpModule} from \"@angular/http\";\n\nimport {AppComponent} from \"./app.component\";\nimport {NgAutoCompleteModule} from \"ng-auto-complete\";\n\n@NgModule({\n    declarations: [\n        AppComponent\n    ],\n    imports: [\n        BrowserModule,\n        FormsModule,\n        HttpModule,\n        NgAutoCompleteModule\n    ],\n    providers: [],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n#### app.component.ts\n```typescript\nimport {Component, ViewChild} from \"@angular/core\";\nimport {CreateNewAutocompleteGroup, SelectedAutocompleteItem, NgAutoCompleteComponent} from \"ng-auto-complete\";\n\n@Component({\n    selector: 'app-root',\n    templateUrl: './app.component.html',\n})\nexport class AppComponent {\n    @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;\n    \n    public group = [\n        CreateNewAutocompleteGroup(\n            'Search / choose in / from list',\n            'completer',\n            [\n                {title: 'Option 1', id: '1'},\n                {title: 'Option 2', id: '2'},\n                {title: 'Option 3', id: '3'},\n                {title: 'Option 4', id: '4'},\n                {title: 'Option 5', id: '5'},\n            ],\n            {titleKey: 'title', childrenKey: null}\n        ),\n    ];\n\n    constructor() {\n\n    }\n\n    /**\n     *\n     * @param item\n     * @constructor\n     */\n    Selected(item: SelectedAutocompleteItem) {\n        console.log(item);\n    }\n}\n\n```\n\n#### app.component.html\n```html\n\u003cng-autocomplete (selected)=\"Selected($event)\" [classes]=\"['']\" [group]=\"group\"\u003e\u003c/ng-autocomplete\u003e\n```\n\n# Remove selected values\n```typescript\npublic selected: any[] = [];\n\nSelected(item: SelectedAutocompleteItem) {\n    this.selected.push(item.item);\n\n    /**\n     * Remove selected values from list,\n     * selected value must be of type: {id: string(based on GUID's), [value: string]: any}[]\n     */\n    this.completer.RemovableValues('completer', this.selected)\n}\n```\n\n# Turn off completion\nIn some cases you may want to disable auto completion. e.g you want a html select element.\n### Example\n![](https://raw.githubusercontent.com/sengirab/ngAutocomplete/master/demo2.gif)\n### Usage\n```typescript    \npublic group = [\n    CreateNewAutocompleteGroup(\n        'Search / choose in / from list',\n        'completer',\n        [\n            {title: 'Option 1', id: '1'},\n            {title: 'Option 2', id: '2'},\n            {title: 'Option 3', id: '3'},\n            {title: 'Option 4', id: '4'},\n            {title: 'Option 5', id: '5'},\n        ],\n        {titleKey: 'title', childrenKey: null},\n        '',\n        false\n    )\n];\n```\n\n# With children\n### Usage\n```typescript\npublic group = [\n    CreateNewAutocompleteGroup(\n        'Search / choose in / from list',\n        'completer_one',\n        [\n            {\n                title: 'Option 1', id: '1',\n                children: [\n                    {title: 'Option 1', id: '1'},\n                    {title: 'Option 2', id: '2'}\n                ]\n            },\n            {\n                title: 'Option 2', id: '2',\n                children: [\n                    {title: 'Option 3', id: '3'},\n                    {title: 'Option 4', id: '4'}\n                ]\n            },\n            {\n                title: 'Option 3', id: '3',\n                children: [\n                    {title: 'Option 5', id: '5'},\n                    {title: 'Option 6', id: '6'}\n                ]\n            },\n        ],\n        {titleKey: 'title', childrenKey: 'children'},\n        ''\n    ),\n    CreateNewAutocompleteGroup(\n        'Search / choose in / from list',\n        'completer_two',\n        [\n            {title: 'Option 1', id: '1'},\n            {title: 'Option 2', id: '2'},\n            {title: 'Option 3', id: '3'},\n            {title: 'Option 4', id: '4'},\n            {title: 'Option 5', id: '5'},\n            {title: 'Option 6', id: '6'},\n        ],\n        {titleKey: 'title', childrenKey: null},\n        'completer_one'\n    )\n];\n```\n\n# Within a form\n\n### Usage:\n```typescript\nimport {Component, OnInit, ViewChild} from \"@angular/core\";\nimport {FormArray, FormBuilder, FormGroup} from \"@angular/forms\";\nimport {CreateNewAutocompleteGroup, SelectedAutocompleteItem, NgAutoCompleteComponent} from \"ng-auto-complete\";\n\n@Component({\n    selector: 'app-root',\n    templateUrl: './app.component.html',\n})\nexport class AppComponent implements OnInit {\n    @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;\n    \n    public form: FormGroup;\n    public group = [\n        CreateNewAutocompleteGroup(\n            'Search / choose in / from list',\n            'completer',\n            [\n                {title: 'Option 1', id: '1'},\n                {title: 'Option 2', id: '2'},\n                {title: 'Option 3', id: '3'},\n                {title: 'Option 4', id: '4'},\n                {title: 'Option 5', id: '5'},\n            ],\n            {titleKey: 'title', childrenKey: null}\n        ),\n    ];\n\n    constructor(private _fb: FormBuilder) {\n\n    }\n    \n    /**\n     *\n     */\n    ngOnInit() {\n        this.form = this._fb.group({\n            items: new FormArray([])\n        });\n    }\n\n    /**\n     *\n     * @param item\n     * @constructor\n     */\n    Selected(item: SelectedAutocompleteItem) {\n        this.form.controls['items'] = this._fb.array([...this.form.controls['items'].value, item.original]);\n       \n        console.log(item);\n    }\n}\n```\n\n# Changelog - (Read before updating.)\n## [4.1.9]\n- Internal fixes \u0026 performance improvements.\n## [4.1.6]\n- I.E fixes\n## [4.1.5]\n- New functions\n    - SetEnable(key: string)\n    - SetDisable(key: string)\n## [4.1.4]\n- ExpressionChangedAfterItHasBeenCheckedError\n    - Fixed this error in a previous version, this ends up in propagating the error, this isn't user friendly.\n    - Since i must check something in the `ngAfterViewChecked` there is no escaping this error unless setTimeout is used (which i did now).\n## [4.1.2]\n- Internal changes\n    - The way how the first value was selected is changed. Package used to wait until view was checked, this was checked\n    periodically via a interval. Now a subject has been created to emit this value to all their subscribers.\n- BREAKING:\n    - `FindInput` function has been removed.\n## [4.0.2] - [4.0.1] - [4.0.0]\n- Updates regarding angular 7\n## [3.1.0]\n### Important. Breaking changes!\n- NgAutocompleteComponent renamed to NgAutoCompleteComponent\n- Very big changes internally. Stopped using rollup to create my npm package.\n    - Using angular libraries now instead.\n## [3.0.0] - 2018-09-14.\n- Updated to newest version of angular.\n## [2.10.5] - 2018-06-07\n- Fixed an maximum callstack exceeded bug.\n## [2.10.3] / [2.10.4] - 2018-06-06\n- Added searchLength to options when create an autocomplete group, it configures when to fire a search. The number given is the amount of characters in the input.\n## [2.10.2] - 2018-05-15.\n- Removed dropdown it's own comparison when using Async. Assuming the user will probably filter the results.\n## [2.10.1] - 2018-05-14.\n- Added new classes to wrong element.\n## [2.10.0] - 2018-05-14.\n- Changes to behaviour of the dropdown (mainly for async).\n  - Dropdown now only opens when there's a default value at start. It will stay closed until it has a list to show. -- Represented by the class: is-initial-empty.\n  - Dropdown now has a loading class; is-loading.\n  - Internal changes to keep the new code compatible with new behaviour.\n## [2.9.12] - 2018-05-11.\n### New Functionality.\n- Support for async functions.\n  - Useful for when you want to use your own API to return results.\n  ```typescript\n  @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;\n\n  const async = (str: string) =\u003e {\n      return new Promise((resolve) =\u003e {\n          setTimeout(() =\u003e {\n              resolve([\n                  {\n                      id: 0,\n                      title: `Test case 1 ${str}`\n                  },\n                  {\n                      id: 1,\n                      title: `Test case 2 ${str}`\n                  },\n                  {\n                      id: 2,\n                      title: `Test case 3 ${str}`\n                  }\n              ])\n          }, 2000)\n      });\n  };\n\n  this.completer.SetAsync('completer', async);\n  ```\n## [2.8.12] - 2018-05-09.\n### New Functionality.\n- Created new functions to add custom ng-templates.\n  - Every ng template receives a context that's equal to an AutocompleteItem type. Except for the dropdownValue, this receives a hightlight too. see example\n  - template parameter must be of type: dropdownValue | placeholderValue | noResults\n   ```typescript\n    @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;\n\n    @ViewChild('dropdownValue') dropdownValue: TemplateRef\u003cany\u003e;\n    @ViewChild('placeholderValue') placeholderValue: TemplateRef\u003cany\u003e;\n    @ViewChild('noResults') noResults: TemplateRef\u003cany\u003e;\n\n    this.completer.SetTemplate('completer', 'dropdownValue', this.dropdownValue);\n    this.completer.SetTemplate('completer', 'noResults', this.noResults);\n    this.completer.SetTemplate('completer', 'placeholderValue', this.placeholderValue);\n    ```\n    ```html\n    \u003cng-template #dropdownValue let-value let-hightlight=\"highlight\"\u003e\n        \u003cdiv [innerHTML]=\"hightlight\"\u003e\u003c/div\u003e\n    \u003c/ng-template\u003e\n  \n    \u003cng-template #placeholderValue let-value\u003e\n        {{value.title}}\n    \u003c/ng-template\u003e\n    \n    \u003cng-template #noResults let-value\u003e\n      Hey, you searched for: {{value}}. But there are no results!\n    \u003c/ng-template\u003e\n    ```\n## [2.7.12] - 2017-11-08.\n- Big performance refactor.\n    - Instead of using arrays, now uses objects. Search by object key.\n- New @output, (no-results) emits GroupNoResult.\n## [1.5.12], [1.6.12], [1.7.12] - 2017-08-29.\n- A lot of internal changes \u0026 bugfixes.\n- In some cases when the a view has a hidden ng-content, that shows if an expression evaluates to true and \n  a completer function has been used e.g(`SelectItem('completer', 5)`) it would give an error; completer view is not\n  initialized. \n  - Functions that are called before the completer view has been initialized are now queued to be fired when the view\n    is actually initialized.\n## [1.4.12] - 2017-08-02.\n- Added tab to submit events. (not preventing default, so still goes to the next input, if there's one).\n- Added better support for navigating with arrows. Dropdown list now navigates to the selected item if the items exceed \nthe dropdown its given height.\n- Internal code cleanup.\n## [1.3.12] - 2017-07-21.\n- Mobile update: Remove mouseover when mobile. This prevents the user from needing to double tap the options.\n## [1.3.11] - 2017-07-21.\n### Styling\n- Some internal styling has changed.\n    - When completer is turned of, input used to be disabled. This doesn't work on all browsers. Input now get\n    `pointer-events: none;`\n- Browser compatibility.\n### Fixes\n- Value has to be set on input (equal to ngModel).\n    - This created an issue on safari, when an item was selected, the placeholder didn't go away.\n    \n\n## [1.3.9] - 2017-07-20.\n### Styling\n- There's a new element `span.ng-autocomplete-dropdown-icon` this replaces the dropdown icon i did with css only.\n### Other changes\n- Increase of internal performance.\n- Had some issues with Element refs. #fixed.\n## [1.2.8] - 2017-07-15.\n### New Functionality.\n- It's now possible to instantiate CreateNewAutocompleteGroup with an empty array and set its value later. This can be useful\nwhen you're waiting for an async task to complete.\n     ```\n        const component = NgAutoCompleteComponent.FindCompleter('completer', this.completers);\n        component.SetValues(\n            'late', // \u003c-- NOTE: this is the key of the input. You can call this what you want.\n            [\n                {title: 'Option 4', id: '1'},\n                {title: 'Option 5', id: '2'},\n                {title: 'Option 6', id: '3'},\n                {title: 'Option 7', id: '4'},\n                {title: 'Option 8', id: '5'},\n                {title: 'Option 9', id: '6'},\n            ]\n        )\n     ```\n\n- Created new pipe to highlight search query. class `dropdown-item-highlight`\n### Changes\n- CreateNewAutocompleteGroup now accepts {id:string|number}, before only {id:string}\n- Some small changes.\n## [1.1.6] - 2017-07-12.\n- KeyEvents now preventDefault\n- Close dropdown on tab.\n- Open dropdown on focus - was only on click.\n- Updated README.md.\n\n## [1.1.5] - 2017-07-12.\n- Maintain active option when input is blurred - also for disabled completion inputs now.\n- Updated README.md.\n\n## [1.1.4] - 2017-07-12.\n- Maintain active option when input is blurred.\n- Updated README.md.\n\n## [1.1.3] - 2017-07-12.\n- Updated README.md.\n\n## [1.1.2] - 2017-07-11.\n- Fixed an issue; when selecting a option from a completer that is parent, active child option didn't reset.\n- Updated README.md.\n\n## [1.1.1] - 2017-07-11.\n### New Functionality.\n- SelectItem(key: string, id: string)\n    - NgAutoCompleteComponent function - Set value manual, by id. This can be useful when the list is loaded\n    but there's a value set in the database. When the data is fetched from server, this method can be used.\n    ```typescript\n      @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;\n      this.completer.SelectItem('completer', '1');\n    ```\n    ### Or if multiple completers in component.\n    \n    ```typescript\n      @ViewChildren(NgAutoCompleteComponent) public completers: QueryList\u003cNgAutoCompleteComponent\u003e;\n\n      const completer = NgAutoCompleteComponent.FindCompleter('group1', this.completers);\n      completer.SelectItem('completer', '1');\n    ```\n    \n## [1.0.1] - 2017-07-11.\n- Only groups with parents did a reset when the input reached a length \u003c= 0. Now all inputs do, input with parents still get set to initial value.\n\n## [1.0.0] - 2017-07-11. Releasing since it's being used.\n### Renamed Functions.\n\n- ResetCompleters to ResetInputs.\n- ResetCompleter to ResetInput.\n- FindCompleter to FindInput.\n- TriggerChangeCompleters to TriggerChange.\n\n### New Functionality.\n- \u003cng-autocomplete [key]=\"'group1'\"\u003e\u003c/ng-autocomplete\u003e - Added key on component.\n- static FindCompleter usage (NgAutoCompleteComponent.FindCompleter()) (not to be confused with the old FindCompleter, now FindInput)\n    - (key: string, list: QueryList\u003cNgAutoCompleteComponent\u003e): NgAutoCompleteComponent. This can be useful when you have multiple ng-autocomplete components\n    in one component. Note that this  can only be used when the view has been init.\n\n# NgAutoCompleteComponent Functions\n\n### Note:\n\n\u003cp\u003eI have made all NgAutoCompleteComponent and CompleterComponent functions public, so you could do a lot more than i'll show you\u003cp\u003e\n\u003cp\u003eI've documented the functions of which i think their useful:\u003cp\u003e\n\n### Usage\n```typescript\n@ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;\n```\n\n| Function | Description |\n| :---         |     :---:      |\n| FindCompleter((key: string, list: QueryList\u003cNgAutoCompleteComponent\u003e)) (Static function) | Finds completer |\n| ResetInputs()   | Resets all rendered completer inputs |\n| FindInput(key: string)     | Find completer input by assigned key |\n| RemovableValues(key: string, list: {id: string or number, [value: string]: any}[]) | Remove options from rendered list (by id) |\n| SelectItem(key: string, id: string or number) | e.g set an initial value on the completers input |\n| SetValues(key: string, {id: string or number, [value: string]: any}[]) | Sets values for the input. Useful in async situations.|\n\n\n# CompleterComponent Functions\n\n### Usage\n```typescript\n@ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;\npublic input = this.completer.FindInput('completer');\n```\n\n| Function | Description |\n| :---         |     :---:      |\n| ClearValue()   | Clears found completer's input. |\n\n# Contributing\n\n### Do you like to code?\n\n- Fork \u0026 clone \n- npm install\n- ng serve\n- git checkout -b my-new-feature\n- component lives in src/app/ng-autocomplete/*\n- Submit a pull request\n\n### Do you like organizing?\n- Link to duplicate issues, and suggest new issue labels, to keep things organized\n- Go through open issues and suggest closing old ones.\n- Ask clarifying questions on recently opened issues to move the discussion forward\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsengirab%2FngAutocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsengirab%2FngAutocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsengirab%2FngAutocomplete/lists"}