search

sengirab / ngAutocomplete

Light-weight autocomplete component for Angular.
MIT License
52 stars 24 forks source link
angular angular-component angular2 angular4 angularjs auto-complete autocomplete completion dropdown ng-auto-complete ng-autocomplete ng-dropdown ng2 ng2-auto-complete typescript

readme

NgAutoComplete / Example

Light-weight autocomplete component for Angular.

Code Climate npm version

https://github.com/sengirab/ngAutocomplete

Installation

npm i ng-auto-complete --save

Styling !Important

First thing to note, i've created this package to be as simple as possible. That's why i don't include any styling, this is so you could style it the way you want it.

If you like the styling i did for the example .gif shown above, you can copy it from here.

Classes

Responses !Important

Response when selected

"{group: AutocompleteGroup, item: AutocompleteItem}"

Response when cleared

"{group: AutocompleteGroup, item: null}"

Note that when calling completer.ResetInput('completer'), this will clear the input. This means that the completer will emit {group: AutocompleteGroup, item: null}. If your listening to this within your component keep in mind that each clear the item will be null

The input will also emit "null" when the input reaches a length of <= 0.

Usage

app.module.ts

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";

import {AppComponent} from "./app.component";
import {NgAutoCompleteModule} from "ng-auto-complete";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        NgAutoCompleteModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import {Component, ViewChild} from "@angular/core";
import {CreateNewAutocompleteGroup, SelectedAutocompleteItem, NgAutoCompleteComponent} from "ng-auto-complete";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;

    public group = [
        CreateNewAutocompleteGroup(
            'Search / choose in / from list',
            'completer',
            [
                {title: 'Option 1', id: '1'},
                {title: 'Option 2', id: '2'},
                {title: 'Option 3', id: '3'},
                {title: 'Option 4', id: '4'},
                {title: 'Option 5', id: '5'},
            ],
            {titleKey: 'title', childrenKey: null}
        ),
    ];

    constructor() {

    }

    /**
     *
     * @param item
     * @constructor
     */
    Selected(item: SelectedAutocompleteItem) {
        console.log(item);
    }
}

app.component.html

<ng-autocomplete (selected)="Selected($event)" [classes]="['']" [group]="group"></ng-autocomplete>

Remove selected values

public selected: any[] = [];

Selected(item: SelectedAutocompleteItem) {
    this.selected.push(item.item);

    /**
     * Remove selected values from list,
     * selected value must be of type: {id: string(based on GUID's), [value: string]: any}[]
     */
    this.completer.RemovableValues('completer', this.selected)
}

Turn off completion

In some cases you may want to disable auto completion. e.g you want a html select element.

Example

Usage

public group = [
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer',
        [
            {title: 'Option 1', id: '1'},
            {title: 'Option 2', id: '2'},
            {title: 'Option 3', id: '3'},
            {title: 'Option 4', id: '4'},
            {title: 'Option 5', id: '5'},
        ],
        {titleKey: 'title', childrenKey: null},
        '',
        false
    )
];

With children

Usage

public group = [
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer_one',
        [
            {
                title: 'Option 1', id: '1',
                children: [
                    {title: 'Option 1', id: '1'},
                    {title: 'Option 2', id: '2'}
                ]
            },
            {
                title: 'Option 2', id: '2',
                children: [
                    {title: 'Option 3', id: '3'},
                    {title: 'Option 4', id: '4'}
                ]
            },
            {
                title: 'Option 3', id: '3',
                children: [
                    {title: 'Option 5', id: '5'},
                    {title: 'Option 6', id: '6'}
                ]
            },
        ],
        {titleKey: 'title', childrenKey: 'children'},
        ''
    ),
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer_two',
        [
            {title: 'Option 1', id: '1'},
            {title: 'Option 2', id: '2'},
            {title: 'Option 3', id: '3'},
            {title: 'Option 4', id: '4'},
            {title: 'Option 5', id: '5'},
            {title: 'Option 6', id: '6'},
        ],
        {titleKey: 'title', childrenKey: null},
        'completer_one'
    )
];

Within a form

Usage:

import {Component, OnInit, ViewChild} from "@angular/core";
import {FormArray, FormBuilder, FormGroup} from "@angular/forms";
import {CreateNewAutocompleteGroup, SelectedAutocompleteItem, NgAutoCompleteComponent} from "ng-auto-complete";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
    @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;

    public form: FormGroup;
    public group = [
        CreateNewAutocompleteGroup(
            'Search / choose in / from list',
            'completer',
            [
                {title: 'Option 1', id: '1'},
                {title: 'Option 2', id: '2'},
                {title: 'Option 3', id: '3'},
                {title: 'Option 4', id: '4'},
                {title: 'Option 5', id: '5'},
            ],
            {titleKey: 'title', childrenKey: null}
        ),
    ];

    constructor(private _fb: FormBuilder) {

    }

    /**
     *
     */
    ngOnInit() {
        this.form = this._fb.group({
            items: new FormArray([])
        });
    }

    /**
     *
     * @param item
     * @constructor
     */
    Selected(item: SelectedAutocompleteItem) {
        this.form.controls['items'] = this._fb.array([...this.form.controls['items'].value, item.original]);

        console.log(item);
    }
}

Changelog - (Read before updating.)

[4.1.9]

[1.3.9] - 2017-07-20.

Styling

[1.1.5] - 2017-07-12.

[1.1.4] - 2017-07-12.

[1.1.3] - 2017-07-12.

[1.1.2] - 2017-07-11.

[1.1.1] - 2017-07-11.

New Functionality.

[1.0.1] - 2017-07-11.

[1.0.0] - 2017-07-11. Releasing since it's being used.

Renamed Functions.

New Functionality.

NgAutoCompleteComponent Functions

Note:

I have made all NgAutoCompleteComponent and CompleterComponent functions public, so you could do a lot more than i'll show you

I've documented the functions of which i think their useful:

### Usage ```typescript @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent; ``` | Function | Description | | :--- | :---: | | FindCompleter((key: string, list: QueryList)) (Static function) | Finds completer | | ResetInputs() | Resets all rendered completer inputs | | FindInput(key: string) | Find completer input by assigned key | | RemovableValues(key: string, list: {id: string or number, [value: string]: any}[]) | Remove options from rendered list (by id) | | SelectItem(key: string, id: string or number) | e.g set an initial value on the completers input | | SetValues(key: string, {id: string or number, [value: string]: any}[]) | Sets values for the input. Useful in async situations.| # CompleterComponent Functions ### Usage ```typescript @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent; public input = this.completer.FindInput('completer'); ``` | Function | Description | | :--- | :---: | | ClearValue() | Clears found completer's input. | # Contributing ### Do you like to code? - Fork & clone - npm install - ng serve - git checkout -b my-new-feature - component lives in src/app/ng-autocomplete/* - Submit a pull request ### Do you like organizing? - Link to duplicate issues, and suggest new issue labels, to keep things organized - Go through open issues and suggest closing old ones. - Ask clarifying questions on recently opened issues to move the discussion forward