Skip to Content
0
Mar 27, 2019 at 06:45 PM

Combo Box filtering in SAP UI5

1591 Views

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..
   }