Openui5: sap.m.SearchField not showing oData suggestion items

[jorgt]

OpenUI5 version: 1.36.12

Browser/version (+device/version): Chrome 51 / MacOSX

Any other tested browsers/devices(OK/FAIL): FAIL

Here's a JSBin for those who'd like to see what I did.

I have SearchField bound to an oData services

<SearchField
    type="Text"
    enableSuggestions="true"
    suggest="onMaterialSuggest"
    suggestionItems="{path: 'part>/Parts'}">
    <suggestionItems>
        <SuggestionItem text="{part>PartDesc}" description="{data>PartID}" key="{part>PartID}"/>
    </suggestionItems>
</SearchField>

onMaterialSuggest contains:

var value = oEvent.getSource().getValue().toUpperCase();
var filters = [];
filters.push(new Filter({
    filters: [
        new Filter("PartID", Operator.Contains, value.toUpperCase()),
        new Filter("PartDesc", Operator.Contains, value.toUpperCase())
    ],
    and: false
}));

oEvent.getSource().getBinding('suggestionItems').filter(filters);

• In the console, I can see that the calls are being made and the results look as expected.
• In the aggregation getAggregation('suggestionItems') I can see that there are items there, the number matching the number of results returned from the oData service.

The suggestion items do not open. I don't mean that there's a blank list, there's just no list. It just displays like an input field. Am I missing anything?

[akudev]

Hi Jorg,
compared to https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.SearchFieldSuggestions/code/Page.controller.js you are missing one call to oEvent.getSource().suggest();
But adding it doesn't help.

sap.ui.getCore().byId("__xmlview0--idAddMaterialSearchField").getSuggestionItems() is an empty array when suggest() is called and therefore the SearchField closes the suggestion list (you can check it in the debugger).
Once onSuggest has finished, sap.ui.getCore().byId("__xmlview0--idAddMaterialSearchField").getSuggestionItems() returns an array of items. You can also check that in the console. Calling sap.ui.getCore().byId("__xmlview0--idAddMaterialSearchField").suggest() then opens the list.

So this is just a timing issue. You need to call suggest() on the SearchField once the items are already created (I think using the respective callbacks on the model).

Regards
Andreas

[jorgt]

Hi @akudev

Despite it being a timing issue, the binding _is_ set directly on the XML, and the filter only applied to the aggregation. Which event do you suggest I use?

[codeworrior]

I think @akudev had something in mind like

onSuggest: function(oEvent) {
    var oSource = oEvent.getSource();

    // build the filters 
    var aFilters = ... 

    // apply them and register for dataReceived    
    var oBinding = oSource.getBinding('suggestionItems');
    oBinding.filter(aFilters);
    oBinding.attachEventOnce('dataReceived', function() {
        // now activate suggestion popup
        oSource.suggest();
    });   
}

Note that the oEvent object is a short-lived object. So you cannot use it later in the dataReceived callback. Any data that you need from it (here: oSource) must be read while the onSuggest event handler is still processing.

[mpredolim]

Hi, i tried this code on https://sapui5.hana.ondemand.com/1.42.9 and this property is missing:

/Parts'}">

Any tips pls?