Dynamic SuggestionItem not working for contains filter

[Former Member]

Hi All,

I tried to follow SAPUI5 demo on dynamic suggestion item whereby on event "suggest" I add new filter for the suggestion item binding.

The link to the demo is here: Sample: Input - Suggestions - Dynamic

The only difference with the sample is I am using oData model instead of Json and I use Contains as the Filter Operator.

handleSuggest: function(oEvent) {
                        var sTerm = oEvent.getParameter("suggestValue");
                        var aFilters = [];
                        if (sTerm) {
                            aFilters.push(new Filter("CompanyName", sap.ui.model.FilterOperator.Contains, sTerm));
                        }
                        oEvent.getSource().getBinding("suggestionItems").filter(aFilters);
                    }

When I debug the oData service in the backend, I notice getEntitySet return correctly based on the filter.

However, it seems like the input field behaviour still only show the result based on Start With filter because it will only suggest records that start with the search term that I typed.

Is the example given by SAP only applicable for StartsWith filter?

If yes, I found it quite redundant because the suggestion items itself already use Start With condition as default.

Is there a way to force my new filter result to be used as suggestion items shown for this specific input?

Thank you.

Regards,

Abraham

[saivellanki · Accepted solution]

Hi Abraham,

According to sap.m.Input code, I guess the default filter is set to 'StartsWith' filter operator.

I didn't find a way to change it, as you already mentioned if we go through explored sample even that way it is not working. However you can raise this as an issue and check with UI5 team? Issues · SAP/openui5 · GitHub

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Hi Sai,

Thank you for confirming that this is the standard behaviour and the sample give can only work one way.

I ended up using event liveChange instead of suggest and add several method call to make my required behaviour work:

handleSuggestCoCd: function(oEvent) {


        var cocdInput = oEvent.getSource();
        var aFilters = [];

        var sTerm = cocdInput.getValue();
        if (sTerm) {
            aFilters.push(new sap.ui.model.Filter("CompCodeText", sap.ui.model.FilterOperator.Contains, sTerm));
        }

        oEvent.getSource().getBinding("suggestionItems").filter(aFilters);
        console.log(oEvent.getSource().getBinding("suggestionItems").oLastContextData);
// this methods call trigger new suggestion item displayed
cocdInput.setShowSuggestion(true);
        cocdInput.setFilterSuggests(false);
        cocdInput.removeAllSuggestionItems();


},




    },

Using this approach, the suggested item will show only those value filtered by my specified filter condition which is Contains.

Hopefully this info can be useful for anyone that encounter similar issue as what I've encountered and I still hope some expert can take a look at this sample and clarify the behaviour issue that I raised.

Regards,

Abraham

[DK007 · Accepted solution]

Hi Abraham,

Can you please show me your view code snipet and liveChange event handler code? Do we need to add any additional functionality to show the suggestion items?

I'm also planning to enhance suggestion to support 2 filters with an OR.

Thanks in advance for your help.

Thanks,

Dheeram

[Former Member · Accepted solution]

Hi Dheeram,

Below is my view code snipet only for the input field and I include my liveChange event handler code in my previous post:

<Input change="onCoCdChange" id="cocdInput" showSuggestion="true" suggestionItemSelected="onCoCdSelected" suggestionItems="{/CompanySet}"
                            type="Text" value="{CompCodeText}" width="100%" liveChange ="handleSuggestCoCd">
     <suggestionItems>
                    <core:ListItem additionalText="{CompCode}" text="{CompCodeText}"/>
     </suggestionItems>
 </Input>

Like what I said, I only change the event from suggest event to liveChange event and 3 additional statement in my event handler code (See my comment on the code to know which lines that I added.

My background is ABAP and this is my first SAPUI5 apps so I'm not really sure whether this is the right approach but it serve my purpose well.

Hope it also work for you.

Thank you.

Regards,
Abraham

[DK007 · Accepted solution]

Hi Abraham,

Thanks for providing your view code snippet. Mine is same as your.

FYI, the reason why I asked yours view code, is because I'm seeing duplicate ID exceptions in the console. Even with same code as your, I'm still seeing duplicate ID errors. Are you seeing same error in your browser console???

Once again thank you.

Thanks,

Dheeram

[junwu · Accepted solution]

which line of code?

[DK007 · Accepted solution]

oEvent.getSource().getBinding("suggestionItems").filter(aFilters);

oInput.setShowSuggestion(true); 

Second line is giving error. If I'm not wrong at this line the items are created to display them in popup screen.

[junwu · Accepted solution]

I copied his code, I don't have your error in my case.

are sure you are using exact same code?

[DK007 · Accepted solution]

Only difference is that my view is a JS and his is XML.

Other thing to note is we both are providing an ID for sap.m.Input field.

[junwu · Accepted solution]

that's big difference. don't use js view if possible