UI5 Search Functionality:
UI5 search functionality allows users to quickly and efficiently find relevant data within SAP UI5 applications. It enhances user experience by providing fast, accurate search results.
Introduction:
Fuzzy search is the technique of finding strings that match a pattern approximately (rather than exactly). It is a type of search that will find matches even when users misspell words or enter in only partial words for the search.
Blog content:
Implemented Fuzzy Search functionality using the Input UI control to fetch records from the database table and display them in the Input suggestion items.
- Within the context of the ABAP programming model for SAP Fiori, you only need to enable the text and fuzzy search functionality in your data model definitions.
- For achieving this functionality, we need to develop the code in the ABAP Function Module while fetching the data from the database table and it should pass as % to the OData filter value.
Output:
UI5 View code:
<Input id="providerContID" value=""
placeholder ="please enter two digits"
showSuggestion="true"
suggest="providerContractLiveChange"
change="onProviderContractLiveChange"
suggestionItems=
"{path:'globalOdataModel>/ProviderContDataSet',templateShareable:false}">
<suggestionItems>
<core:Item text="{path:'globalOdataModel>ContractNumber'}"/>
</suggestionItems>
</Input>
UI5 Controller:
Code logic must be written for the Suggest property in the Input control for fetching the data records from the table based on the user inputs and to display the data in the suggestion items in the Input control.
providerContractLiveChange:function(oEvent){
var value,oMainModel1,sPathDetail,oData1,oModel1,ProviderContract,aTokenFilters,oThis; oThis = this;
value = oEvent.getParameter("suggestValue");
var valueSub = oThis.getView().byId("subAccountID").getValue();
if(valueSub){
oThis.subAccountFilterData();
}else{
oMainModel1 = new ODataModel(proxy);
sPathDetail;
oData1;
oModel1 = oThis.getView().getModel("globalOdataModel");
ProviderContract = "ContAcc_Search";
aTokenFilters = [];
if (value) {
if (value.length >= 2) {
aTokenFilters.push(new Filter(ProviderContract, FilterOperator.EQ, value));
sPathDetail = "/Contracts_ListSet";
oMainModel1.read(sPathDetail, {
async: true,
filters: aTokenFilters,
success: function(oEvent1) {
oData1 = oEvent1.results;
var dups = [];
var arr1 = oEvent1.results.filter(function (el) {
if (dups.indexOf(el.ContractNumber) == -1) {
dups.push(el.ContractNumber);
return true;
}
return false;
});
oModel1.setProperty("/ProviderContDataSet", arr1);
},
});
}
}
oThis.onProviderContDataSearch(value);
}
},
onProviderContDataSearch: function(value) {
var filters = [];
this.providerContID = this.getView().byId("providerContID");
if (!value) {
value = this.providerContID.getValue();
}
if (value.length >= 2) {
filters = [new sap.ui.model.Filter([
new sap.ui.model.Filter("ContractNumber", function(sText) {
return (sText || "").toUpperCase().indexOf(value.toUpperCase()) > -1;
})
], false)];
}
this.providerContID.getBinding("suggestionItems").filter(filters);
},
Fuzzy Search Output:
