Próbuję zrobić automatyczne uzupełnianie w pasku wyszukiwania, co zrobiłem do tej pory.Jak wykonać autouzupełnianie w trybie jonowym 2 (pasek wyszukiwania)
Mam tablicę z niektórymi ciągami. a następnie próbuję wyświetlić w moich pozycjach, że mogę przeszukać element particualr.
Ale moim wymaganiem nie jest wyświetlanie pozycji na liście. Muszę zrobić, klikając na pasku wyszukiwania wszystkie ciągi w tablicy powinny pochodzić i muszę wykonać wyszukiwanie.
<ion-header>
<ion-navbar>
<ion-title>search</ion-title>
</ion-navbar>
<ion-toolbar primary >
<ion-searchbar (ionInput)="getItems($event)" autocorrect="off"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
Kod dla pliku search.ts:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
/*
Generated class for the SearchPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
templateUrl: 'build/pages/search/search.html',
})
export class SearchPage {
private searchQuery: string = '';
private items: string[];
constructor(private navCtrl: NavController) {
this.initializeItems();
}
initializeItems() {
this.items = [
'Amsterdam',
'Bogota',
]
}
getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
let val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
}
Pytanie:
Jak uzyskać wartość tablicy przez auto kompletne jonowego 2.
Czy możesz również dodać kod swojego widoku? – sebaferreras
Dodałem mój kod zarówno pliku HTML, jak i .ts, proszę spojrzeć na to. Jestem nowy w tym – balaji
Widzę w jonowych dokumentach, że mają autouzupełnianie właściwości dla paska wyszukiwania, czy próbowałeś tego? http://ionicframework.pl/docs/v2/api/components/searchbar/Searchbar/ – galvan