html 세팅
<!-- child component HTML -->
<ion-searchbar autocomplete="on" [(ngModel)]="searchbarInput" (ionInput)="filterItems($event)"
debounce="500">
</ion-searchbar>
<ion-list *ngIf="listActive">
<ion-item *ngFor="let item of items" (click)="fillSearchbarText(item.title)" style="cursor: pointer;">
<ion-label>
<strong>{{item.title}}</strong>
</ion-label>
</ion-item>
</ion-list>
<ion-searchbar
autocomplete="on" : 자동완성 기능을 사용합니다.
[(ngModel)]="searchbarInput" : searchbarInput과 ion-searchbar의 input을 2-way바인딩 합니다.
(ionInput)="filterItems($event)" : Input에 입력될 때 마다 filterItems() 메쏘드를 실행합니다.
debounce="500" : (ionInput)의 작동 시간에 반응 시간을 설정합니다. (기본은 250)
<ion-list *ngIf="listActive" : ion-list를 표시할 때 쓰는 flag입니다.
<ion-item *ngFor="let item of items" : filterItems로 필터링 된 값을 뿌립니다.
<ion-item (click)="fillSearchbarText(item.title)" : 해당 아이템의 값을 바인딩된 searchbarInput에 넣습니다.
// child component ts file
import { Component, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { DeviceCommon, ItemView } from '../device-common';
class ItemView {
title: string
}
@Component({
selector: 'app-autocomplete-searchbar',
templateUrl: './autocomplete-searchbar.component.html',
styleUrls: ['./autocomplete-searchbar.component.scss'],
})
export class AutocompleteSearchbarComponent {
@Input() itemViewArr: ItemView[];
@Output() itemSelected = new EventEmitter<string>();
@ViewChild('', { static: true }) searchbarInput: string;
private listActive = false;
private items: ItemView[] = [];
constructor(private common: DeviceCommon) { }
initializeItems() {
this.items = [...this.itemViewArr];
}
includeAnySpell = (result: ItemView[], item: ItemView, term: string) => {
const include = (str: string) => str.toLowerCase().indexOf(term.toLowerCase()) > -1;
if (include(item.title)) {
result.push(item.title)
}
return result;
}
filterItems(ev: any) {
this.initializeItems();
const term: string = ev.target.value;
if (term && term.trim() != '') {
this.listActive = true;
this.items = this.items.reduce((result: ItemView[], item: ItemView) => this.includeAnySpell(result, item, term), []);
} else {
this.listActive = false;
}
}
fillSearchbarText(title: string) {
this.searchbarInput = title;
this.listActive = false;
this.itemSelected.emit(title);
}
}
@Input() itemViewArr: ItemView[]; : 부모 컴포넌트에서 받은 property값입니다.
@Output() itemSelected = new EventEmitter<string>(); : 부모 컴포넌트에 보낼 이벤트입니다.
@ViewChild('', { static: true }) searchbarInput: string; : [(ngModel)]="searchbarInput" 바인딩을 선언합니다.
initializeItems() {
this.items = [...this.itemViewArr];
}
외부에서 받은 itemViewArr값을 this.items에 복사하여 넣습니다.
includeAnySpell = (result: ItemView[], item: ItemView, term: string) => {
const include = (str: string) => str.toLowerCase().indexOf(term.toLowerCase()) > -1;
if (include(item.title)) {
result.push(item.title)
}
return result;
}
filterItems(ev: any) {
this.initializeItems();
const term: string = ev.target.value;
if (term && term.trim() != '') {
this.listActive = true;
this.items = this.items.reduce((result: ItemView[], item: ItemView) => this.includeAnySpell(result, item, term), []);
} else {
this.listActive = false;
}
}
includeAnySpell = (result: ItemView[], item: ItemView, term: string) => {...} : Array.reduce에 사용할 함수 선언합니다.
const include = (str: string) => str.toLowerCase().indexOf(term.toLowerCase()) > -1; : input에서 입력된 값중에 한글자라도 포함되면 true 를 반환하는 함수입니다.
filterItems(ev: any) : <ion-searchbar (ionInput)="filterItems($event)" 로써 입력될 때 마다 작동합니다.
this.initializeItems(); : 아이템을 초기화합니다.
const term: string = ev.target.value; : input에 입력된 값을 가져옵니다.
fillSearchbarText(title: string) {
this.searchbarInput = title;
this.listActive = false;
this.itemSelected.emit(title);
}
<ion-item 을 클릭했을 때 작동하는 메쏘드 입니다.
this.searchbarInput=title; : 해당 item의 값을 input에 입력합니다.
this.itemSelected.emit(title); : 선택된 값을 부모 컴포넌트에 전달합니다.
<!-- parent component HTML -->
<app-autocomplete-searchbar [itemViewArr]="itemViewArr" (itemSelected)="autocompletedValue($event)"
</app-autocomplete-searchbar>
<app-autocomplete-searchbar : 위의 child component 입니다.
[itemViewArr]="itemViewArr" : child component에서 @Input으로 받을 값 입니다.
[itemViewArr] : child component에서 사용할 property값 입니다.
"itemViewArr" : parent component에서 보내는 ts 값입니다.
(itemSelected)="autocompletedValue($event)" :
(itemSelected) : child component의 itemSelected(EventEmitter).emit()이 실행될 때
"autocompletedValue($event)" : parent component에서 실행 될 메쏘드로 child component에서 값을 받습니다.
// parent component ts
itemViewArr: ItemView[] = [];
setItemView() {
this.itemViewArr = [];
this.msgHouse.msgHouse.forEach(msgRoom => {
this.itemViewArr.push(new ItemView(msgRoom.title));
})
}
autocompletedValue(title: string) {
if (title && title.length) {
console.log(title);
}
}
setItemView() {...} : child component로 들어갈 this.itemViewArr을 채웁니다.
autocompletedValue(title: string) : child component에서 보낸 값을 받는 메쏘드 입니다.
응용을 하면 아래와 같은 화면도 가능합니다.
f를 입력했을 경우, f가 포함된 모든 단어들이 다 나오도록 할 수 있습니다.
