https://github.com/jinhduong/ng2-awesomplete

Angular wrapper for Awesomplete
https://github.com/jinhduong/ng2-awesomplete

Last synced: 8 days ago
JSON representation

Angular wrapper for Awesomplete

• Host: GitHub
• URL: https://github.com/jinhduong/ng2-awesomplete
• Owner: jinhduong
• License: mit
• Created: 2017-07-24T16:29:02.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-25T05:05:58.000Z (over 7 years ago)
• Last Synced: 2024-10-13T13:23:11.662Z (2 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ng2-awesomplete

![ng2-awesomplete](http://i.imgur.com/VSLmh6e.png)

`npm install ng2-awesomplete --save`

Angular wrapper for [Awesomplete](http://leaverou.github.io/awesomplete/#basic-usage)

- No dependencies

- Easy to use

- Can be use with `FormControl`

# Using

### Add to module

```js

@NgModule({

  imports: [

    AwesompleteModule

  ],

  declarations: [

    ...

  ],

  exports: [

    ...

  ]

})

```

### .html and .component.ts

1. Only use `list`

```js

```

2. Combite between `list` and `options`

```js

```

> You can learn the original option configuration from homepage [http://leaverou.github.io/awesomplete/#customization](http://leaverou.github.io/awesomplete/#customization)

### Interfaces, apis

- `list`

```js

AwesompleteItem[] | string[] | [string, string]

interface AwesompleteItem {

    label: string;

    value: any;

};

```

- `options`:

```js

interface AwesompleteOptions {

    /* Where to find the list of suggestions. Described in more detail in the “Basic usage” section above. */

    list?: AwesompleteItem[] | string[] | [string, string];

    /* Minimum characters the user has to type before the autocomplete popup shows up. */

    minChars?: number;

    /* Maximum number of suggestions to display. */

    maxItems?: number;

    /* Should the first element be automatically selected?  */

    autoFirst?: boolean;

    /* Controls how entries get matched. By default, the input can match anywhere in the string and it’s a case insensitive match. */

    filter?: any;

    /* Controls how list items are ordered. */

    sort?: any;

    /* Controls how list items are generated. */

    item?: any;

    /* Controls how the user’s selection replaces the user’s input. For example,

     this is useful if you want the selection to only partially replace the user’s input. */

    replace?: any;

    /* Controls suggestions' label and value. This is useful if you have list items in custom format,

     or want to change list items based on user's input. */

    data?: any;

};

```

Thanks.