https://github.com/liuy97/ng2-input-autocomplete

angular2 input autocomplete
https://github.com/liuy97/ng2-input-autocomplete

Last synced: about 2 months ago
JSON representation

angular2 input autocomplete

• Host: GitHub
• URL: https://github.com/liuy97/ng2-input-autocomplete
• Owner: liuy97
• License: mit
• Created: 2016-12-01T22:31:56.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T05:15:53.000Z (about 2 years ago)
• Last Synced: 2024-09-29T09:25:16.372Z (3 months ago)
• Language: TypeScript
• Homepage: https://liuy97.github.io/ng2-input-autocomplete/
• Size: 5.13 MB
• Stars: 7
• Watchers: 3
• Forks: 5
• Open Issues: 18
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE

Awesome Lists containing this project

README

        
# ng2-input-autocomplete

[![npm version](https://badge.fury.io/js/ng2-input-autocomplete.svg)](https://badge.fury.io/js/ng2-input-autocomplete)

[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)

[![Build Status](https://travis-ci.org/liuy97/ng2-input-autocomplete.svg?branch=master)](https://travis-ci.org/liuy97/ng2-input-autocomplete)

#### Quick links

[StackBlitz Template](https://stackblitz.com/edit/ng2-input-autocomplete)

Angular2 input autocomplete

## Installation

To install this library, run:

```bash

$ npm install ng2-input-autocomplete --save

```

## breaking changes from V1.0.0

Directive name has been changed from autocomplete to input-autocomplete

## Usage

and then from your Angular `AppModule`:

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library

import { AutocompleteModule } from 'ng2-input-autocomplete';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AutocompleteModule.forRoot()

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

Once your library is imported, you can use its components and directives:

Three input elements: **config**, **items**, **ngModel**

config supports two properties: **placeholder** and  **sourceField** which is used to search.

Two optional properties: **class** for customized css style and **max** for the max number of items.

Two output events: **selectEvent** (when a item is selected) and **inputChangedEvent** (when users input)

```xml



  String



  
Objects:

  


    

  

  
Wiki:

  


    

  

```


in styles.css

```css

.test li.active {

  width: 100%;

  background-color: red!important;

}

.test li {

  color: blue;

}

```

```typescript

export class AppComponent  {

  selectedItem: any = '';

  inputChanged: any = '';

  wikiItems: any[] = [];

  items2: any[] = [{id: 0, payload: {label: 'Tom'}},

    {id: 1, payload: {label: 'John'}},

    {id: 2, payload: {label: 'Lisa'}},

    {id: 3, payload: {label: 'Js'}},

    {id: 4, payload: {label: 'Java'}},

    {id: 5, payload: {label: 'c'}},

    {id: 6, payload: {label: 'vc'}}

  ];

  config2: any = {'class': 'test', 'max': 2, 'placeholder': 'test', 'sourceField': ['payload', 'label']};

  constructor(private service: WikipediaService) {}

  onSelect(item: any) {

    this.selectedItem = item;

  }

  onInputChangedEvent(val: string) {

    this.inputChanged = val;

  }

  search (term: string) {

    this.service.search(term).subscribe(e => this.wikiItems = e, error => console.log(error));

  }

}

```

**Note:** If you're using reactive forms, pass the `FormControl` into the input as a prop like `` for methods such as `setValue` or `reset` to work.

## Development

```bash

$ npm run test

```

## License

MIT © [liuy97]([email protected])