CODEWITHSUNDEEP
angulartypescriptionic3
Vin Nwaikwu
Vin Nwaikwu

Reputation: 67

Ionic 3 Search not refreshing list on cancel

I don't know a better way to ask this. I have added a search bar in ionic it's seems to be working. The problem is if I clicked the cancel icon on the search bar, the lists/contents doesn't return.

Here is my.html

    <ion-header>

    <ion-navbar >
    <ion-title>Worship and Fellowship</ion-title>
    </ion-navbar>
        <ion-searchbar 
        (ionInput)="getItems($event)">
        </ion-searchbar>
</ion-header>


<ion-content padding>

  <ion-list inset>

    <ion-item *ngFor="let lesson of lessons; index as i;" slice:0:10>

<h4 (click)="loadLesson(lesson)" tapable>{{ lesson.title | uppercase }}</h4>

    </ion-item>
</ion-list>

</ion-content>

Here is my .ts

@IonicPage()
@Component({
  selector: 'page-section1',
  templateUrl: 'section1.html',
})
export class Section1Page {


  //public lessons = new Array();

  ID:number;
  lessons:Lessons[];
 // section1: any[];



  constructor(public navCtrl: NavController, public navParams: NavParams, private cdata: ChorusdataProvider) {


    this.cdata.getData().subscribe(lists => {
    console.log("lessons are here", lists['section1']);
    this.lessons = lists['section1'];
  });

  }  


  initializeItems() {
    this.lessons = this.lessons;
  }

  getItems(ev) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the ev target
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.lessons = this.lessons.filter((lesson) => {
        return (lesson.title.toString().toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
  }

I don't what it is that I am doing wrong. I want if someone use the search bar, and tap that little cancel icon, the content list should refresh to it original state just like any other search bar would do. What am I getting wrong?

Upvotes: 1

Views: 604

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

So in you case you simply "mutate" your original list and not keeping original list intact for a resetting its state.

Try using an approach with a "snapshot" and also when you reset your searchable list prevent just assigning another array as it will be just passed by reference.

@IonicPage()
@Component({
    selector: 'page-section1',
    templateUrl: 'section1.html',
})
export class Section1Page {

    ID: number;
    // searchable list holder array:
    lessons: Lessons[];
    // snapshot of original list array:
    lessonsSnapshot: Lessons[];

    constructor(public navCtrl: NavController, public navParams: NavParams, private cdata: ChorusdataProvider) {
        this.cdata.getData().subscribe(lists => {
            console.log("lessons are here", lists['section1']);
            // create snapshot:
            this.lessonsSnapshot = lists['section1'];
            // populate view:
            this.lessons = lists['section1'];
        });

    }


    initializeItems() {
        // use spread to create brand new array off snapshot
        this.lessons = [...this.lessonsSnapshot];
    }

    getItems(ev) {
        // Reset items back to all of the items
        this.initializeItems();

        // set val to the value of the ev target
        var val = ev.target.value;

        // if the value is an empty string don't filter the items
        if (val && val.trim() != '') {
            this.lessons = this.lessons.filter((lesson) => {
                return (lesson.title.toString().toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }
}

Upvotes: 1

Related Questions