# ng5-auto-complete

> An Auto-Complete Module for Angular 5 with extended features and make life easy.

Latest version **0.0.8** (published 2018-02-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install ng5-auto-complete
pnpm add ng5-auto-complete
yarn add ng5-auto-complete
bun add ng5-auto-complete
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2018-02-23 |
| First published | 2018-02-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 54.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | hardeepsingh12994@gmail.com |
| Maintainers | hardeep.singh |
| Keywords | ng5-auto-complete, auto-complete, ng5, auto-list-ng5, auto-input-ng5, ng5-auto-input, ng-auto-complete, autoComplete-ng5 |

## Links

- npm: https://www.npmjs.com/package/ng5-auto-complete
- Repository: https://github.com/hardy12994/ng5-auto-complete
- Homepage: https://github.com/hardy12994/ng5-auto-complete#readme
- Issues: https://github.com/hardy12994/ng5-auto-complete/issues
- npm.io page: https://npm.io/package/ng5-auto-complete

## Recent versions

- 0.0.8 (latest) — 2018-02-23
- 0.0.7 — 2018-02-23
- 0.0.68 — 2018-02-23
- 0.0.67 — 2018-02-22
- 0.0.66 — 2018-02-22
- 0.0.65 — 2018-02-22
- 0.0.62 — 2018-02-22
- 0.0.61 — 2018-02-22
- 0.0.6 — 2018-02-22
- 0.0.5 — 2018-02-22
- 0.0.4 — 2018-02-22
- 0.0.26 — 2018-02-21
- 0.0.25 — 2018-02-21
- 0.0.24 — 2018-02-21
- 0.0.23 — 2018-02-21
- … 5 more at https://npm.io/package/ng5-auto-complete/versions

## README

# ng5-auto-complete


This Module can be use when you want Auto-Complete Functionality on your INPUT Tag in the 
**Angular5** Enviroment.

You can use with **Reactive Angular Forms** or with simple forms with **ngModel directive**.


![1](http://res.cloudinary.com/dkws91cqo/image/upload/v1519209918/Screenshot_from_2018-02-21_16-06-21_wky5k3.png)

![2](http://res.cloudinary.com/dkws91cqo/image/upload/v1519209953/Screenshot_from_2018-02-21_16-06-25_gmgqo9.png)

![3](http://res.cloudinary.com/dkws91cqo/image/upload/v1519209957/Screenshot_from_2018-02-21_16-07-07_s1ghzk.png)

## Installation -
```sh

        npm install --save ng5-auto-complete

```

## What it provides is -

- WORKS with **REACTIVE-ANGULAR FORMS**,**NORMAL-FORMS**,**[(ngModel)]**
- RUN on Array of Strings `Array<String>` or an  Objects `Array<Object>`.
- Open the Auto-List on Number of Word-Length you have Typed. _**`Default 0`**_
- How many List-Members to be shown from Matches.  _**`Default 15`**_
- What Should be the `TEXT` on *NO RECORD FOUND*. _**`Default ''`**_

Works On -
--------

* TAP or CLICK
* TAB KEY
* ENTER KEY
* ON BLUR

## How to Start with it -


Please include these scripts in your main `index.html`.

```sh

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

```


Now Import the AutoCompleteModule in your main NgModule of your application

and insert this module in your imports array of NgModule.

 ```sh

   //main module
   
   import { AutoCompleteModule } from 'ng5-auto-complete';
   @NgModule({
       imports :[
           AutoCompleteModule
       ]
   })

 ``` 

Its time to Integrate this module in your HTML **INPUT** Tag

```sh

    <input id="list" [ng5-auto-complete]="list">

```

This will provide the list of 15 best match from provided list.


Here are the *Extented features* -

- **[word-trigger]** -

This is use when you want to open list on perticular word count. 
It Accepts Number. Default value = 0;

Example- `[word-trigger]="2"`                  

- **[list-length]** -

This is use when you want to set the length of list which will open. 
It Accepts Number. Default value = 15;

Example- `[list-length]="10"`

- **filterName** -

Only use when you are providing object List as `Array<Object>`.
which thing to filter from object and show that.
`[{ name:"hardy", hobby:"coding"},.....]` , here if `filterName` is *name*
then name is filtered and shown on input tag.

Example- ` filterName="name"`


**NOTE** -

If you not provide the filtername on providing the array list of objects it will throw ERROR.
        
- **no-record-text** -

This is use when you want to show when *no record found*.

Example - `no-record-text="No Records Found!"`   


*USED AS* -

```sh

<input style="margin: 40px;" id="list"
[ng5-auto-complete]="countryList" 
[word-trigger]="2" [list-length]="10"
filterName="name" no-record-text="No Records Found!" >

```


NOTE -
------

- It always sets **String** in the input ( on any list( `String or Object` )  )
- The List Above Should be of Array of Strings or Objects.
- The `Input Id should be Unique` in your HTML page.



*Contributions are most Wellcome.*

---
_Source: https://npm.io/package/ng5-auto-complete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._