# Ion-searchbar in real time with database

**URL:** <https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235>\
**Category:** ionic-v3\
**Created:** [April 7, 2018, 3:58pm UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235 "2018-04-07T15:58:06Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quiesan](https://avatars.discourse-cdn.com/v4/letter/q/7ab992/32.png) [@Quiesan](https://forum.ionicframework.com/u/Quiesan)\
**Post date:** [April 7, 2018, 3:58pm UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/1 "2018-04-07T15:58:06Z")

</div>

Hi !  
How Can I interact with my database in real time when the user enter letter in ion-searchbar please ?

---

<div class="post-metadata">

**Author:** ![jaydz](https://avatars.discourse-cdn.com/v4/letter/j/858c86/32.png) [@jaydz](https://forum.ionicframework.com/u/jaydz)\
**Post date:** [April 8, 2018, 5:54am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/2 "2018-04-08T05:54:15Z")

</div>

Start with a behavior subject to act as search terms. Create a function to implement next on that behavior subject. Continuously match strings based on information in your database. Send out an Observable of matching terms. Subscribe.

---

<div class="post-metadata">

**Author:** ![Quiesan](https://avatars.discourse-cdn.com/v4/letter/q/7ab992/32.png) [@Quiesan](https://forum.ionicframework.com/u/Quiesan)\
**Post date:** [April 8, 2018, 7:50am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/3 "2018-04-08T07:50:17Z")

</div>

But with this solution, the server will receive many request ?! Is it good for him ?

---

<div class="post-metadata">

**Author:** ![jaydz](https://avatars.discourse-cdn.com/v4/letter/j/858c86/32.png) [@jaydz](https://forum.ionicframework.com/u/jaydz)\
**Post date:** [April 8, 2018, 8:20am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/4 "2018-04-08T08:20:57Z")

</div>

Probably not. But do you really expect a searchbar in “real time” to be especially efficient? That’s about as likely as @rapropos’ cat growing a mullet. Probably not gonna happen.

Get your data on the front end and store it if you’re seriously concerned about performance I suppose.

---

<div class="post-metadata">

**Author:** ![Quiesan](https://avatars.discourse-cdn.com/v4/letter/q/7ab992/32.png) [@Quiesan](https://forum.ionicframework.com/u/Quiesan)\
**Post date:** [April 8, 2018, 9:06am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/5 "2018-04-08T09:06:17Z")

</div>

> [@jaydz](#):
>
> Probably not. But do you really expect a searchbar in “real time” to be especially efficient? That’s about as likely as @rapropos’ cat growing a mullet. Probably not gonna happen.
> 
> Get your data on the front end and store it if you’re seriously concerned about performance I suppose.

Ok thank you very much !

---

<div class="post-metadata">

**Author:** ![avishai\_peretz\_dev](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@avishai\_peretz\_dev](https://forum.ionicframework.com/u/avishai_peretz_dev)\
**Post date:** [April 8, 2018, 10:55am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/6 "2018-04-08T10:55:08Z")

</div>

To store the data in local is depends on the size of your data.  
If you have more than 100 items i suggest you to make your searchbar as server side autocomplete

---

<div class="post-metadata">

**Author:** ![Quiesan](https://avatars.discourse-cdn.com/v4/letter/q/7ab992/32.png) [@Quiesan](https://forum.ionicframework.com/u/Quiesan)\
**Post date:** [April 8, 2018, 11:49am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/7 "2018-04-08T11:49:49Z")

</div>

But how I can do that please ? I would like something like facebook where when you tap, the result appear in real time…

---

<div class="post-metadata">

**Author:** ![avishai\_peretz\_dev](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@avishai\_peretz\_dev](https://forum.ionicframework.com/u/avishai_peretz_dev)\
**Post date:** [April 8, 2018, 11:57am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/8 "2018-04-08T11:57:14Z")

</div>

html file:

```auto
 <ion-searchbar #searchBarEl
                 [(ngModel)]="query"
                 (ionInput)="getResults()">
  </ion-searchbar>

  <ion-list *ngIf="matches.length > 0">
    <ng-container *ngFor="let item of matches">

      <ion-item [style.height]="40" (click)="selectItem(item)" role="button">
        <div>{{item.description}}</div>
      </ion-item>

    </ng-container>

  </ion-list>

```

ts file:

```auto
...
getResults() {
   this.matches = [];
    this.selected = {
      id: '',
      description: ''
    };

    this.loadingMatches = true;

    this.apiProvider.get('serverUrl', {query: this.query}).then((res:any) => {
      this.loadingMatches = false;

      this.matches = res;
    }, (err) => {
      this.loadingMatches = false;
      console.log('err: ', err);
    });
}

...

```

---

<div class="post-metadata">

**Author:** ![Quiesan](https://avatars.discourse-cdn.com/v4/letter/q/7ab992/32.png) [@Quiesan](https://forum.ionicframework.com/u/Quiesan)\
**Post date:** [April 8, 2018, 12:08pm UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/9 "2018-04-08T12:08:28Z")

</div>

Thanks I will try ! 🙂

---

<div class="post-metadata">

**Author:** ![Quiesan](https://avatars.discourse-cdn.com/v4/letter/q/7ab992/32.png) [@Quiesan](https://forum.ionicframework.com/u/Quiesan)\
**Post date:** [April 23, 2018, 10:17am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/10 "2018-04-23T10:17:49Z")

</div>

I try and that’s work ! But just one question please. Why did you put $event in this “getResults($event)” ?

---

<div class="post-metadata">

**Author:** ![avishai\_peretz\_dev](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@avishai\_peretz\_dev](https://forum.ionicframework.com/u/avishai_peretz_dev)\
**Post date:** [April 25, 2018, 11:14am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/11 "2018-04-25T11:14:32Z")

</div>

You pass the searchbar value in $event

---

<div class="post-metadata">

**Author:** ![Quiesan](https://avatars.discourse-cdn.com/v4/letter/q/7ab992/32.png) [@Quiesan](https://forum.ionicframework.com/u/Quiesan)\
**Post date:** [April 30, 2018, 9:03am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/12 "2018-04-30T09:03:17Z")

</div>

But we have already this information with the doubl binding in ngModel ?

---

<div class="post-metadata">

**Author:** ![avishai\_peretz\_dev](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@avishai\_peretz\_dev](https://forum.ionicframework.com/u/avishai_peretz_dev)\
**Post date:** [May 3, 2018, 5:56am UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/13 "2018-05-03T05:56:55Z")

</div>

You can use the ngModel variable.  
If you want you can call to “getResults()” without $event it will work.

---

<div class="post-metadata">

**Author:** ![mofrey](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@mofrey](https://forum.ionicframework.com/u/mofrey)\
**Post date:** [July 21, 2020, 9:59pm UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/14 "2020-07-21T21:59:10Z")

</div>

that is straight. pls sir can you share more a little bit am a novice and i did not seem to understand working with behavior subject and observables

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:54pm UTC](https://forum.ionicframework.com/t/ion-searchbar-in-real-time-with-database/127235/15 "2021-07-19T20:54:23Z")

</div>