Search bar in order to find word in page

I make an application with some pages where there is articles in it.
And I would like to create a search bar to find words in these pages.

At the moment I have my search bar in the toolbar but I do not see how to continue at all.
I don’t understand how it works

Can you give me some help?
Thank you


This is what i have done for search bar filter.

in you .html file with searchbar

<ion-searchbar class="grey-bg" placeholder="Search more Chat & Prople" [color]="white" [(ngModel)] = "searchTerm" (ngModelChange) = "search()"></ion-searchbar>

      <ion-item class="ionItemStyle" *ngFor="let a of showArray" (click)="done(a)">
        <h3 class="theme-color">{{a}}</h3>


i have defined search function whenever user search something

And in .ts file results get filtered, It is working demo.

export class ChatPage {
   public searchTerm : any;

   constructor(public navCtrl: NavController, public navParams: NavParams,private alertCtrl: AlertController) {
    this.searchTerm = '';
    this.arr = [
      'Natasha Romanoff',
      'Tony Stark',
      'Black widow',
      'Hawk Eye',
      'The Hulk'
    this.showArray = this.arr;

  search(): void {
    let term = this.searchTerm;

      this.showArray = this.arr.filter((tag)=> {
        tag = tag.toLowerCase();
          return tag.indexOf(term.toLowerCase()) >= 0;


I have achieved WhatsApp like search feature, thanks to Mark.js and Scroll-into-view.

HTML part -

<ion-header id="">
    <ion-toolbar class="search-bar" no-border-top>
        <form (ngSubmit)="showCurrentMark('next')" class="search-form">
            <ion-searchbar #searchInput ion-input name="searchField"
        <ion-buttons end>
            <button ion-button clear (click)="showCurrentMark('prev')">
                <ion-icon name="ios-arrow-up"></ion-icon>
            <button ion-button clear (click)="showCurrentMark('next')">
                <ion-icon name="ios-arrow-down"></ion-icon>

TS part -

import * as Mark from 'mark.js'; // For search highlighting
import * as scrollElmIntoView from 'scroll-into-view';

export class HomePage {
  // Instance for Mark for higlighting search along with marked count
  markInstance: any; // Instance/scope of search
  markResults:any = []; // Total number marked results
  currMarkIndx = -1; // Index of in view marked search result

    // Search entered string from search bar
    // Clear previous marked searches if any

    // Create variable for target(s) container
    var responseArr = $('#target-elements');
    var searchStr = this.searchField.content.trim(); // Current entered string

    // Create Mark instance (using JavaScript object array instead of jQuery object array)
    this.markInstance = new Mark(responseArr.toArray());
    // Supply the string to search with options

    // Find array of marked elements
    this.markResults = responseArr.find('mark');
    this.currMarkIndx = -1; // Reset the index counter
    // Update index to highlight current mark
      if(direction == 'next'){
        if(this.currMarkIndx == -1){
          this.currMarkIndx = 0;
          this.currMarkIndx == this.markResults.length - 1 ? this.currMarkIndx = 0 : this.currMarkIndx++;
      else if(direction == 'prev'){
        if(this.currMarkIndx == -1){
          this.currMarkIndx = this.markResults.length - 1;
          this.currMarkIndx == 0 ? this.currMarkIndx = this.markResults.length - 1 : this.currMarkIndx--;

      this.presentToast('No result found.');
    // Scroll and highlight mark
      var position,
          currentMark = this.markResults.eq(this.currMarkIndx);

      // Remove "current" class from all elements

        // Scroll to currently higligted search
        scrollElmIntoView(currentMark[0], { time: 250 });
      this.presentToast('No result found.');
    // Clear all marked searches
    return new Promise((resolve, reject)=>{

Looks good… but what is this target-element? Are you using jQuery to select them?

Ok got it working when added jQuery (npm install jquery). For those who have the same question #target-ement would be the container element that holds the text to look into.
Thanks @sujit77!

I’m trying to use this code but I’m having a problem in this line
var searchStr = this.searchField.content.trim();
It’s saying that the searchField does not exist in the .ts
Can anyone help?

If you look at ion-searchbar in HTML, the ngModel point to searchField.content. This means that the searchField is an object type variable declared under the Component class, added below -

searchField = {
  content: ""

Few more variables - this.presentToast is Ionic Tost. Also, to get target HTML elements, I am using jQuery in my code, you can use Angular elements or plain JavaScript document.querySelectorAll('#target-elements').
Seems like I forgot to mention that in my prior comment. I will update it accordingly.

Can I use the same line of code to search inside a document ?