Fuzzy Search in UI5

February 11, 2021 by vijaykumar muniganti in Latest, SAP BRIM, SAP Fiori, SAP Fiori App, SAP Mobile Apps

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 by Input UI control for fetching the 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: