Light-weight autocomplete component for Angular.
Light-weight autocomplete component for Angular.
https://github.com/sengirab/ngAutocomplete
npm i ng-auto-complete --save
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.
"{group: AutocompleteGroup, item: AutocompleteItem}"
"{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
.
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 {
}
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);
}
}
<ng-autocomplete (selected)="Selected($event)" [classes]="['']" [group]="group"></ng-autocomplete>
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)
}
In some cases you may want to disable auto completion. e.g you want a html select element.
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
)
];
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'
)
];
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);
}
}
ngAfterViewChecked
there is no escaping this error unless setTimeout is used (which i did now).FindInput
function has been removed.@ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
const async = (str: string) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
id: 0,
title: `Test case 1 ${str}`
},
{
id: 1,
title: `Test case 2 ${str}`
},
{
id: 2,
title: `Test case 3 ${str}`
}
])
}, 2000)
});
};
this.completer.SetAsync('completer', async);
@ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
@ViewChild('dropdownValue') dropdownValue: TemplateRef<any>;
@ViewChild('placeholderValue') placeholderValue: TemplateRef<any>;
@ViewChild('noResults') noResults: TemplateRef<any>;
this.completer.SetTemplate('completer', 'dropdownValue', this.dropdownValue);
this.completer.SetTemplate('completer', 'noResults', this.noResults);
this.completer.SetTemplate('completer', 'placeholderValue', this.placeholderValue);
<ng-template #dropdownValue let-value let-hightlight="highlight">
<div [innerHTML]="hightlight"></div>
</ng-template>
<ng-template #placeholderValue let-value>
{{value.title}}
</ng-template>
<ng-template #noResults let-value>
Hey, you searched for: {{value}}. But there are no results!
</ng-template>
SelectItem('completer', 5)
) it would give an error; completer view is not
initialized.
pointer-events: none;
span.ng-autocomplete-dropdown-icon
this replaces the dropdown icon i did with css only.It's now possible to instantiate CreateNewAutocompleteGroup with an empty array and set its value later. This can be useful when you're waiting for an async task to complete.
const component = NgAutoCompleteComponent.FindCompleter('completer', this.completers);
component.SetValues(
'late', // <-- NOTE: this is the key of the input. You can call this what you want.
[
{title: 'Option 4', id: '1'},
{title: 'Option 5', id: '2'},
{title: 'Option 6', id: '3'},
{title: 'Option 7', id: '4'},
{title: 'Option 8', id: '5'},
{title: 'Option 9', id: '6'},
]
)
Created new pipe to highlight search query. class dropdown-item-highlight
@ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
this.completer.SelectItem('completer', '1');
@ViewChildren(NgAutoCompleteComponent) public completers: QueryList<NgAutoCompleteComponent>;
const completer = NgAutoCompleteComponent.FindCompleter('group1', this.completers);
completer.SelectItem('completer', '1');
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:
@ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
Function | Description |
---|---|
FindCompleter((key: string, list: QueryList<NgAutoCompleteComponent>)) (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. |
@ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;
public input = this.completer.FindInput('completer');
Function | Description |
---|---|
ClearValue() | Clears found completer's input. |