Question

我目前正在使用首字母缩略词搜索功能工具开发应用。我已经成功地使用SQLite-Ext插件显示了预先填充的数据库，但是因为如何实现所需的搜索功能而陷入困境。在Ionic 2网站上，有一个关于如何使用内置的“离子搜索栏”的说明＆＃39; 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;
}

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

1 个答案: