Client-side search in Master-Detail Fiori like Apps

While creating project from template for SAP Fiori Master Detail Application in Web IDE, by defaults we get onSearch method created in Template. In onSearch method we havesap.ui.model.Filterto use and we can add any number of filters and at last we can bind like this:

this.getView().byId("list").getBinding("items").filter(filters);

In this way, we are calling backend odata services to search and performance wise we experience slowness to get search results. We can modify this method to search in client-side and we can get search as Fiori apps. Here I will show the updated method:

onSearch: function() {       this.oInitialLoadFinishedDeferred = jQuery.Deferred();       var searchString = this.getView().byId("searchField").getValue();       var masterScreenList = this.getView().byId("list");       var items = [];       for (var i = 0; i < masterScreenList.getItems().length; i++) {            masterScreenList.getItems()[i].setVisible(false);       }       for (var k = 0; k < recoveryArray.length; k++) {            masterScreenList.getItems()[k].setVisible(true);       }       for (var i = 0; i < masterScreenList.getItems().length; i++) {            var banktype = masterScreenList.getItems()[i].getTitle();            var paymenttype = masterScreenList.getItems()[i].getNumber();            var sDate = masterScreenList.getItems()[i].getAttributes()[0].getText();            var eDate = masterScreenList.getItems()[i].getAttributes()[1].getText();            if (banktype.toString().toUpperCase().indexOf(searchString.toUpperCase()) === -1            && paymenttype.toString().toUpperCase().indexOf(searchString.toUpperCase()) === -1            && sDate.toString().toUpperCase().indexOf(searchString.toUpperCase()) === -1            && eDate.toString().toUpperCase().indexOf(searchString.toUpperCase()) === -1) {                 var aItem = masterScreenList.getItems()[i];                 items.push(aItem);            }       }       for (var j = 0; j < items.length; j++) {            items[j].setVisible(false);       }       //On phone devices, there is nothing to select from the list       if (sap.ui.Device.system.phone) {            return;       }  }

The recoveryArrayvariable has to be declared global inMaster.controller.jsand initialize it at selectFirstItem method created in template like this:

this.recoveryArray = this.getView().byId("list").getItems();

Every time model changes, callselectFirstItem to load all items in recoveryArray and show/hide according to search.