cancel
Showing results for 
Search instead for 
Did you mean: 

Combo Box filtering in SAP UI5

0 Kudos

I have had a select control where I could select from user names. Now I want to convert that select into combo box so I can give the user ability to enter text as well. The values populated in the combo box are in text property as {FirstName}, {LastName}. I do not want to use additional text as it shows at end of the row wih lot of space in between. My issue with Combo box is :

Values get populated but how do I filter? There is already some logic that is written on change method. I want to do custom filtering on the values. For example: If I write "P" it should show all the values that have P in the text (First name and last name). Where to write filter function? Also I found custom filtering code in demokit, I want to use it - but when I use it in inti method under delegate, I get error - this.get....setfilterfunction().. is not a function

View.xml

<ComboBox items= "{path:'items>/name'}" id="A"
  selectedKey="{item>/Header/Name}" change="nameSelected">
<core:ListItem key="{order>NameID}" text="{order>LastName} ,{order>FirstName}"/>
 </ComboBox>    

Controller.js

_initializeData: function () {
var name = this.getView().byId("A");
 name.addEventDelegate({
      onAfterRendering: function() {
        this.getView().byId("A").setFilterFunction(function(sTerm, oItem) {
           return oItem.getText().match(new RegExp(sTerm, "i")) || 
                  oItem.getKey().match(new RegExp(sTerm, "i"));
        });
       }
      }, 

    nameSelected: function () {
     ......some logic processing..
   }

Accepted Solutions (0)

Answers (2)

Answers (2)

former_member742671
Discoverer
0 Kudos

Hii man thanks. It's Working For me.

this is the controler.js

var oMultiComboSite = this.getView().byId("idMultiComboboxSite");
oMultiComboSite.setFilterFunction((sText,oEvents) => {
   return oEvents.getText().match(new RegExp(sText, "i")) || 
      oEvents.getKey().match(new RegExp(sText, "i"));
})


this is my XML view

<fb:FilterGroupItem groupName="__$INTERNAL$" name="Site" label="Site" mandatory="true" partOfCurrentVariant="true" visibleInFilterBar="true">
   <fb:control>
     <MultiComboBox  selectedKeys="{mView>/Site}" items="{oData>/Site(P_Client='01')/Results}" showSecondaryValues="true" id="idMultiComboboxSite">
         <core:ListItem key="{oData>Site}" text="{oData>SiteName}" additionalText="{oData>Site}"/>
    </MultiComboBox>
   </fb:control>
</fb:FilterGroupItem>




former_member182862
Active Contributor
0 Kudos

Hi Arati

There are some binding issues in the XML. Apart from that it is ok.

https://jsbin.com/fufoti/edit?html,js,output