cancel
Showing results for 
Search instead for 
Did you mean: 

sap.m.SearchField - filter suggestions

Trinidad
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi,

I want to filter the suggestions on a sap.m.searchField based on a fuzzy search.

In a first step I just try to get the full list with a simple filtering.

I have been able to implement suggestions on the sap.m.searchField and when I enter some characters in the searchField the suggestions that contain the characters are bolded.

But what I want to do is to show only the ones that contain the characters I type and not the other ones. How can I implement it?

I have taken as sample for my development the following sapui5 sample:

https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.SearchFieldSuggestions/preview

And here you have my code.

Definition of the searchField:

<SearchField id="searchField" showRefreshButton="{= !${device>/support/touch} }" tooltip="{i18n>masterSearchTooltip}" width="100%"
  search="onSearch"  
  enableSuggestions="true" suggest="onSuggest" 
  suggestionItems="{
     path: '/bpg',
     sorter: { path: 'GroupName' }
  }">
   <suggestionItems>
     <SuggestionItem text="{GroupName}" description="{path: 'GroupCode'}" key="{GroupCode}"/>
   </suggestionItems>
</SearchField>

Implementation of the onSuggest.

With the line

searchField.getBinding("suggestionItems").filter(filters);

commented the suggestions are presented without filters.

If I uncomment the line the suggestions are not anymore shown.

onSuggest: function(event) {
  var searchField = this.byId("searchField");
  var sValue = event.getParameter("suggestValue");
									
  var filters = [];
  if (sValue) {
    filters = [
        new sap.ui.model.Filter([
          new sap.ui.model.Filter("GroupName", function(sText) {
            return (sText || "").toUpperCase().indexOf(sValue.toUpperCase()) > -1;
          }),
          new sap.ui.model.Filter("GroupeCode", function(sDes) {
  	    return (sDes || "").toUpperCase().indexOf(sValue.toUpperCase()) > -1;
          })
      ], false)
    ];
  }

  //searchField.getBinding("suggestionItems").filter(filters);
  searchField.suggest();	
},

Do you have an idea where can be the problem?

In a second step I'll try to adapt the sample to work with a Fuzzy Search query but for the moment a simple filtering should be enough.

PS: I have checked the following thread for the fuzzy search but I'll like to keep using the searchField as created by Fiori Master-Detail template instead of using Input.

Thanks in advance for your ideas

Trinidad.

Accepted Solutions (0)

Answers (1)

Answers (1)

sanjoy0308
Active Participant
0 Kudos

Hi,

Change the onSuggest function as below

                onSuggest: function (event) {
			var sValue = event.getParameter("suggestValue"),
				aFilters = [];
			if (sValue) {
				aFilters.push(new Filter({
					filters: [
						new Filter("GroupName", FilterOperator.Contains, sValue.toUpperCase()),
new Filter("GroupCode", FilterOperator.Contains, sValue.toUpperCase())
], and: false })); } var oSource = event.getSource(); var oBinding = oSource.getBinding('suggestionItems'); oBinding.filter(aFilters); oBinding.attachEventOnce('dataReceived', function () { oSource.suggest(); }); },