How To Use SearchField Control for FreeText Search on UI5

How To Use SearchField Control for FreeText Search on UI5

 

 

  1. Add SearchField on View

     

<SearchField id=”mySearchField” width=”60%” liveChange=”onLiveSearch” showRefreshButton=”{device>/isNoTouch}” placeholder=”{i18n>SEARCH_RELATIONSHIPS}”/>                                

   

   

   

   

  1. Add JS Control Process Logic.

The Red Highlight is setting “or” meaning related for multiple combine filter

Notes:

and: false => or

and: true => and

   

 

// ->Add Search Function For Relationships , Wei.Zhu 2017.11.16

onLiveSearch: function(oEvent) {

var delay = 300;

var searchString = oEvent.getParameter(“newValue”);

var that = this;

window.clearTimeout(this.liveChangeTimer);

this.liveChangeTimer = window.setTimeout(function() {

that._applyFilter(null, searchString);

}, delay);

},        

   

_getFilters: function(liveSearchValue) {

var aFilters = [];

 

// Add filter with search value

var        searchValue;

if (liveSearchValue) {

searchValue = liveSearchValue;

} else {

searchValue = this.byId(“mySearchField”).getValue();

}

// Convert search value to upper case for case-independent search

// if (searchValue && searchValue.toUpperCase && this.isSearchTextSupported()) {

//         searchValue = searchValue.toUpperCase();

// }

if(searchValue && searchValue.length > 0) {

aFilters.push(new sap.ui.model.Filter(“relationshipCategoryText”, sap.ui.model.FilterOperator.Contains, searchValue));

   

aFilters.push(new sap.ui.model.Filter(“accountFullName”, sap.ui.model.FilterOperator.Contains, searchValue));

   

return new sap.ui.model.Filter({filters: aFilters, and: false});

}

else{

return aFilters;

}

 

   

   

},

 

_applyFilter: function(callback, searchValue) {

var oBinding = this.getList().getBinding(“items”);

// When calling this method the first time, aApplicationFilters

// contains custom filters. These filters have to be removed

// in order to filter with the desired filters.

oBinding.aApplicationFilters = [];

if(callback){

oBinding.attachEventOnce(“dataReceived“, callback, this);

}

// Apply the current filter to update master list binding

oBinding.filter(this._getFilters(searchValue));

}        

//<-

 

 

— Test Result —

 

Leave a Comment