我正在尝试在我的搜索栏中自动完成我到目前为止所做的事情。
我有一个包含一些字符串的数组。然后我尝试在我的项目中列出我能够搜索的特定项目。
但我的要求不是在列表中显示项目。我必须在单击搜索栏时,数组中的所有字符串都应该出现,并且我必须进行搜索。
<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>
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);
})
}
}
}
问题 :
如何通过 ionic 2 中的自动完成获取数组的值
为了实现这一点,您只需在代码中添加一些小东西即可。请看一下这个笨蛋 http://plnkr.co/edit/o6YGCA?p=preview.
就像你可以看到的那样,showList
变量我们只能在用户搜索完内容后才显示结果。
<ion-list *ngIf="showList">
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>
我们首先将该变量设置为false
in the constructor
然后我们将其设置为true
在 - 的里面getItems(...)
method.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)