I’m currently developing an app with an Acronym Search function tool. I’ve successfully got the pre-populated database displaying as it should using the SQLite-Ext plugin yet have got stuck as how to implement the search function needed.
I’ve been reading into the built in ‘ion-searchbar’ as was suggested by someone yesterday https://ionicframework.com/docs/v2/components/#searchbar, however I can’t see how this could be connected to a pre-populated database on the app. I need it to filter through these acronyms by their name.
This is my current 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>
home.ts-
@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
});
}
});
});
}
}
Neither the SQLite_Ext or Ionic documentation seem to cover this. Research so far has only used hard-coded databases as opposed to external ones. Any help would be greatly appreciated.