# Search bar with List not working

**URL:** <https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612>\
**Category:** ionic-v3\
**Created:** [February 14, 2017, 4:01pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612 "2017-02-14T16:01:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![easyitis](https://avatars.discourse-cdn.com/v4/letter/e/c2a13f/32.png) [@easyitis](https://forum.ionicframework.com/u/easyitis)\
**Post date:** [February 14, 2017, 4:01pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612/1 "2017-02-14T16:01:41Z")

</div>

I’ve a virtual scroll list with a search bar using Ionic 2.0.1.  
HTML code:  
\<ion-searchbar (ionInput)=“getItems($event)”\>

TS code  
getItems(ev: any) {  
// Reset items back to all of the items  
console.log(“reinitialize”);  
this.initializeItems();

```
// set val to the value of the searchbar
let val = ev.target.value;
console.log("search for: " + val);
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
  console.log("filtering");
  this.items = this.items.filter((item) => {
    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

```

}

When a try to enter a search text I can see the list getting filtered for a split second and then it goes back to the original state to show all the items again.

UPDATE - with some more debugging I can see that the filter is taking effect in the code but not updating in the list!  
UPDATE2 - it all works when items is a fixed array. But when I read items from storage it doesn’t work!  
What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![zoinky](https://avatars.discourse-cdn.com/v4/letter/z/9fc348/32.png) [@zoinky](https://forum.ionicframework.com/u/zoinky)\
**Post date:** [February 16, 2017, 7:06pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612/2 "2017-02-16T19:06:57Z")

</div>

where is ur storage code? u probably not doing a .then on the storage get

---

<div class="post-metadata">

**Author:** ![easyitis](https://avatars.discourse-cdn.com/v4/letter/e/c2a13f/32.png) [@easyitis](https://forum.ionicframework.com/u/easyitis)\
**Post date:** [February 16, 2017, 7:20pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612/3 "2017-02-16T19:20:23Z")

</div>

Thanks for your reply. My storage code is called from initializeItems().

> initializeItems() {  
> //get items  
> this.dataService.getItems().then((cItems) =\> {  
> if (cItems) {  
> this.items = JSON.parse(cItems);  
> }  
> });  
> }

---

<div class="post-metadata">

**Author:** ![zoinky](https://avatars.discourse-cdn.com/v4/letter/z/9fc348/32.png) [@zoinky](https://forum.ionicframework.com/u/zoinky)\
**Post date:** [February 16, 2017, 7:34pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612/4 "2017-02-16T19:34:19Z")

</div>

where is your storage.get()

---

<div class="post-metadata">

**Author:** ![easyitis](https://avatars.discourse-cdn.com/v4/letter/e/c2a13f/32.png) [@easyitis](https://forum.ionicframework.com/u/easyitis)\
**Post date:** [February 16, 2017, 8:04pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612/5 "2017-02-16T20:04:56Z")

</div>

It’s been called from:

> [@easyitis](#):
>
> this.dataService.getItems()

---

<div class="post-metadata">

**Author:** ![zoinky](https://avatars.discourse-cdn.com/v4/letter/z/9fc348/32.png) [@zoinky](https://forum.ionicframework.com/u/zoinky)\
**Post date:** [February 16, 2017, 10:13pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612/6 "2017-02-16T22:13:45Z")

</div>

i was talking about your actual “storage.get” the one that retrieves from storage, show me the implementation of getItems

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [February 16, 2017, 10:24pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612/7 "2017-02-16T22:24:26Z")

</div>

You are acting as though `initializeItems` behaves synchronously. You cannot rely on `this.items` being set to anything until the underlying promise resolves. Return it from `initializeItems` and chain off that.

```auto
initializeItems(): Promise<Item[]> {
  // the data service should be responsible for dealing with JSON and getting data into the proper format. 
  // that should not be client code responsibility
  return this.dataService.getItems();
}

this.initializeItems().then((items) => {
  this.items = items;
  let val = ev.target.value;
  if (val && val.trim() != '') {
    // do filtering
  }
  // only in here can you rely on this.items having been received
});

// outside here you cannot rely on this.items not being stale

```

---

<div class="post-metadata">

**Author:** ![easyitis](https://avatars.discourse-cdn.com/v4/letter/e/c2a13f/32.png) [@easyitis](https://forum.ionicframework.com/u/easyitis)\
**Post date:** [February 16, 2017, 11:06pm UTC](https://forum.ionicframework.com/t/search-bar-with-list-not-working/79612/8 "2017-02-16T23:06:18Z")

</div>

Thanks @zoinky and @rapropos for helping. I took a hint from @rapropos and was able to resolve the situation like this.

```
  getItems(ev: any) {
// Reset items back to all of the items
console.log("reinitialize");

this.dataService.getItems().then((cItems) => {
  if (cItems) {
    this.items = JSON.parse(cItems);

    // set val to the value of the searchbar
    let val = ev.target.value;
    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
});
}
```