How To Use SearchField Control for FreeText Search on UI5
-
Add SearchField on View
<SearchField id=”mySearchField” width=”60%” liveChange=”onLiveSearch” showRefreshButton=”{device>/isNoTouch}” placeholder=”{i18n>SEARCH_RELATIONSHIPS}”/>
- 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 —
