{"id":21972964,"url":"https://github.com/hardeep-bit/ng4-auto-complete","last_synced_at":"2026-05-05T03:34:35.697Z","repository":{"id":95778205,"uuid":"122943966","full_name":"hardeep-bit/ng4-auto-complete","owner":"hardeep-bit","description":"Using Input Tag and on type the list refresh, with Features - show list length, taking String/Object list, list trigger on word count, takes string and gives string","archived":false,"fork":false,"pushed_at":"2018-03-09T12:27:31.000Z","size":57,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T05:17:26.362Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hardeep-bit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-26T09:14:46.000Z","updated_at":"2018-12-03T06:41:35.000Z","dependencies_parsed_at":"2023-05-22T17:45:16.618Z","dependency_job_id":null,"html_url":"https://github.com/hardeep-bit/ng4-auto-complete","commit_stats":null,"previous_names":["hardeep-bit/ng4-auto-complete","hardy12994/ng4-auto-complete"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardeep-bit%2Fng4-auto-complete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardeep-bit%2Fng4-auto-complete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardeep-bit%2Fng4-auto-complete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardeep-bit%2Fng4-auto-complete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hardeep-bit","download_url":"https://codeload.github.com/hardeep-bit/ng4-auto-complete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245031516,"owners_count":20549926,"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-29T15:23:33.704Z","updated_at":"2026-05-05T03:34:35.661Z","avatar_url":"https://github.com/hardeep-bit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng4-auto-complete\n\n\n#### Note - **For Angular 5 please reffer to this [**NG5-AUTO-COMPLETE**](https://www.npmjs.com/package/ng5-auto-complete)**\n\nThis Module can be use when you want Auto-Complete Functionality on your INPUT Tag in the \n**Angular4** Enviroment.\n\nYou can use with **Reactive Angular Forms** or with simple forms with **ngModel directive**.\n\n\n![1](http://res.cloudinary.com/dkws91cqo/image/upload/v1519209918/Screenshot_from_2018-02-21_16-06-21_wky5k3.png)\n\n![2](http://res.cloudinary.com/dkws91cqo/image/upload/v1519209953/Screenshot_from_2018-02-21_16-06-25_gmgqo9.png)\n\n![3](http://res.cloudinary.com/dkws91cqo/image/upload/v1519209957/Screenshot_from_2018-02-21_16-07-07_s1ghzk.png)\n\n## Installation -\n```sh\n\n        npm install --save ng4-auto-complete\n\n```\n\n## What it provides is -\n\n- WORKS with **REACTIVE-ANGULAR FORMS**,**NORMAL-FORMS**,**[(ngModel)]**\n- RUN on Array of Strings `Array\u003cString\u003e` or an  Objects `Array\u003cObject\u003e`.\n- Open the Auto-List on Number of Word-Length you have Typed. _**`Default 0`**_\n- How many List-Members to be shown from Matches.  _**`Default 15`**_\n- What Should be the `TEXT` on *NO RECORD FOUND*. _**`Default ''`**_\n\nWorks On -\n--------\n\n* TAP or CLICK\n* TAB KEY\n* ENTER KEY\n* ON BLUR\n\n## How to Start with it -\n\n\nPlease include these scripts in your main `index.html`.\n\n```sh\n\n    \u003clink rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\"\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-1.12.4.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.js\"\u003e\u003c/script\u003e\n\n```\n\n\nNow Import the AutoCompleteModule in your main NgModule of your application\n\nand insert this module in your imports array of NgModule.\n\n ```sh\n\n   //main module\n   \n   import { AutoCompleteModule } from 'ng4-auto-complete';\n   @NgModule({\n       imports :[\n           AutoCompleteModule\n       ]\n   })\n\n ``` \n\nIts time to Integrate this module in your HTML **INPUT** Tag\n\n```sh\n\n    \u003cinput id=\"list\" [ng4-auto-complete]=\"list\"\u003e\n\n```\n\nThis will provide the list of 15 best match from provided list.\n\n\nHere are the *Extented features* -\n\n- **[word-trigger]** -\n\nThis is use when you want to open list on perticular word count. \nIt Accepts Number. Default value = 0;\n\nExample- `[word-trigger]=\"2\"`                  \n\n- **[list-length]** -\n\nThis is use when you want to set the length of list which will open. \nIt Accepts Number. Default value = 15;\n\nExample- `[list-length]=\"10\"`\n\n- **filterName** -\n\nOnly use when you are providing object List as `Array\u003cObject\u003e`.\nwhich thing to filter from object and show that.\n`[{ name:\"hardy\", hobby:\"coding\"},.....]` , here if `filterName` is *name*\nthen name is filtered and shown on input tag.\n\nExample- ` filterName=\"name\"`\n\n\n**NOTE** -\n\nIf you not provide the filtername on providing the array list of objects it will throw ERROR.\n        \n- **no-record-text** -\n\nThis is use when you want to show when *no record found*.\n\nExample - `no-record-text=\"No Records Found!\"`   \n\n\n*USED AS* -\n\n```sh\n\n\u003cinput style=\"margin: 40px;\" id=\"list\"\n[ng4-auto-complete]=\"countryList\" \n[word-trigger]=\"2\" [list-length]=\"10\"\nfilterName=\"name\" no-record-text=\"No Records Found!\" \u003e\n\n```\n\n\n\n## Set Dynamic List -\n\nFor Dynamic List we can *inject* the Service i.e `AutoCompleteService`\n\nin your component and set it when you get the list like this -\n\n\n```sh\n  import { AutoCompleteService } from 'ng4-auto-complete';\n  \n  export class YourComponent{ \n\n      constructor(public autoCompleteService: AutoCompleteService){ }\n\n      //call this method when you get list from *any* side\n      setList(list){\n          this.autoCompleteService.setDynamicList(list);\n          // this will log in console if your list is empty.\n      }\n  }\n\n```\n\nNOTE -\n------\n\n- It always sets **String** in the input ( on any list( `String or Object` )  )\n- The List Above Should be of Array of Strings or Objects.\n- The `Input Id should be Unique` in your HTML page.\n\n\n\n*Contributions are most Wellcome.*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhardeep-bit%2Fng4-auto-complete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhardeep-bit%2Fng4-auto-complete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhardeep-bit%2Fng4-auto-complete/lists"}