ComboBox with entered text filtering - SAP UI5

Question

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

On suggestion would be to use SearchField : sapui5.netweaver.ondemand.com/sdk/#/sample/… If I see the issue in the meantime, will reply — Nandan Chaturvedi
could you not create a derived field (either as part of you model from the backend or on receipt of the model from the server?) i.e. fullname = LastName + ", " + FirstName? — Bernard

Francesco Iannazzo Francesco Iannazzo · Accepted Answer · 2019-03-28T07:00:42

You have to bind this in your function. I guess. Can you access this.getView().byId("A") , when you put a break point in the onAfterRendering part ?

Try this solution: You are not working in the right scope.

 _initializeData: function () {

                var name = this.getView().byId("A");
                name.addEventDelegate({
                    onAfterRendering: this.setFilter.bind(this) });
            },


            setFilter: function() {
                this.getView().byId("A").setFilterFunction(function(sTerm, oItem) {
                    return oItem.getText().match(new RegExp(sTerm, "i")) ||
                        oItem.getKey().match(new RegExp(sTerm, "i"));
                });
            },

ComboBox with entered text filtering - SAP UI5

1 Answers