如何在 ionic 2 中自动完成(搜索栏)

问题描述

我正在尝试在我的搜索栏中进行自动完成，到目前为止我所做的是.

I am trying to do an auto complete in my search bar what i have done so far is.

我有一个包含一些字符串的数组.然后我试图在我的项目中列出我可以搜索特定项目.

I have an array with some strings. and then i am trying to list in my items it i am able to search the particualr item.

但我的要求是不要在列表中显示项目.我必须点击搜索栏，数组中的所有字符串都应该出现，我必须进行搜索.

But my requirement is not to display the items in a list. I have to make on clicking the search bar all the strings in array should come and the i have to make a search.

<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 文件的代码:

Code for search.ts file:

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中通过自动完成获取数组的值.

推荐答案

为了实现这一点，你只需要在你的代码中添加一个小东西.请看看这个plunker.

In order to achieve that, you just need to add a small thing to your code. Please take a look at this plunker.

正如您在此处看到的那样，通过 showList 变量，我们只能在用户搜索某些内容后显示结果.

Like you can see there, with the showList variable we can show the results only after the user has searched something.

  <ion-list *ngIf="showList">
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>

我们首先在 constructor 中将该变量设置为 false，然后在 getItems(...) 方法.

We first set that variable to false in the constructor and then we set it to true inside the getItems(...) method.

这篇关于如何在 ionic 2 中自动完成(搜索栏)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！