使用 Ionic 2 在预先填充的数据库中实现搜索

Question

我目前正在开发一个带有缩写词搜索功能工具的应用程序。我已经成功地显示了预填充的数据库，因为它应该使用 SQLite-Ext 插件但在如何实现所需的搜索功能方面遇到了困难。在 Ionic 2 网站上，有关于如何使用内置“离子搜索栏”https://ionicframework.com/docs/v2/components/#searchbar 的说明，但我看不出它如何连接到应用程序上的预填充数据库。

home.html-

<ion-content padding>
    <ion-searchbar (ionInput)="queryAcronyms($event)"></ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let name of acronyms; let nIndex = index">
        <h2>{{ name.name }}</h2>
        <p>{{ name.meaning }}</p>
    </ion-item>
    </ion-list>
</ion-content>

home.ts-

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { SQLite } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public storage: SQLite;
  private options = { name: "data7.db", location: 'default', createFromLocation: 1 };
  private queryAcronyms = "SELECT * FROM acronymsFinal";
  public acronyms: any = [];

  constructor(public navCtrl: NavController) {
    this.storage = new SQLite();
    this.storage.openDatabase(this.options).then((success) => {
      this.storage.executeSql(this.queryAcronyms, {}).then((data) => {
        let rows = data.rows;
        for (let i = 0; i < rows.length; i++) {
            this.acronyms.push({
                name: rows.item(i).name,
                meaning: rows.item(i).meaning
            });
        }
      });
    });
  }
}

理想情况下，我需要一个位于页面顶部的搜索栏（正如我已经输入的那样），它允许您按首字母缩略词名称过滤数据。我也尝试过浏览其他各种搜索教程，但这些似乎都是针对 Ionic 1 或您在代码中填充的数据库。

我对 Ionic 和数据库控制还很陌生，因此非常感谢任何帮助！

Answer 1

Create a new function with queryAcronyms name like below and filter your data according search query and reinitialize your array

public queryAcronyms(){
    let temparray  =  [];
    temparray =  this.acronyms.filter((item) => {
        return item.name.toLowerCase().indexOf(this.queryText.toLowerCase()) > -1;
    });
    this.acronyms = temparray;
}