Implement Advanced Search on Ionic App

Ionic Framework
1

Hello everyone!
I start saying I’m pretty new to the framework and pretty new in web development in general.
On my App I have a JSON array updated from API with more than 100 question objects, a question object is made like this:

{
 "question": "How do you do that?",
 "short_answer": "You should press the red button",
 "full_answer": "After you press the red button a white window will appear",
 "tags": "#red #button #tutorial"
}

I’m trying to implement a search bar where users can search a specific question or issue they may have, so I did it this way:

On the HTML file:
<ion-searchbar *ngIf="data_loaded" placeholder="{{ 'SEARCH_PLACEHOLDER' | translate }}" showCancelButton="never" (ionChange)="searchChange($event)" (ionClear)="searchChange($event)" (ionInput)="onSearchInput()" animated="true" debounce="500" inputmode="search" spellcheck="true" ></ion-searchbar>

On the .ts file:

  searchChange($event){
    this.noResults = false;
    if($event.detail!=null && $event.detail.value!="") {
      //TODO: filter questions here
      let searchVal = $event.detail.value;

      this.filtered_questions = this.filterItems(searchVal);

      if(this.filtered_questions.length == 0) {
        this.noResults = true;
      }

    }else{
      this.filtered_questions = this.globals.all_questions;
    }
    this.showSpinner = false;
  }

  filterItems(searchTerm) {
    return this.globals.all_questions.filter(question => {
      return (question.question.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 || 
            question.short_answer.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 ||
            question.full_answer.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 || 
            question.tags.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
      );
    });
  }

The filterItems function apply a simple filter to all the questions, returning those that contains the word entered by the user.
This of course does not work well for my particular use-case. I could split the single word out of the phrase entered by the user, but still I think the result would be poor.

I know this is surely more an Angular issue than a Ionic issue, but I wanted to give it a try and ask here if someone has some advice regarding this, maybe using external libraries to improve the search.

Thanks!

2

One option would be to look at a fulltext indexing system such as lunr.

3

Thanks a lot! That was exactly what I was looking for!