SAPUI5 Search Field Suggestion Autocomplete

Question

I am developing an SAPUI5 application. What I want to achieve is to have a suggestion list autocomplete in my search field. For example when I type "app", I will list suggestion of "apple, application". The list of suggestion is retrieving from xsodata web services.

I am using enableSuggestions and suggestionItems in my SAPUI5, but it does not works at all. The following is my sample code.

view.xml

    <headerToolbar>
        <Toolbar>
            <Title text="Product Module"/>
            <ToolbarSpacer/>
            <SearchField width="50%" enableSuggestions="true" search="onFilterProducts" suggest="onSuggest"
            suggestionItems="{
                path: 'newspageModel>/Product',
                sorter: { path: 'BRAND_NO' }
            }"
            >
                <suggestionItems>
                    <SuggestionItem text="{PRODUCT_NAME}"  key="{PRODUCT_NO}"/>
                </suggestionItems>  
            </SearchField>
        </Toolbar>
    </headerToolbar>

Controller.js

    onSuggest: function(oEvent){
            var value = oEvent.getParameter("suggestValue");
        var filters = [];
        if (value) {
            filters = [
                new sap.ui.model.Filter([
                    new sap.ui.model.Filter("PRODUCT_NAME", function(sText) {
                        return (sText || "").toUpperCase().indexOf(value.toUpperCase()) > -1;
                    })
                ], false)
            ];
        }

        this.oSF.getBinding("suggestionItems").filter(filters);
        this.oSF.suggest();
    }

Can anyone help me about this?

Answer 1

There's a timing issue with the odata service and the suggestion pop up. It's caught me out before as well. Technically, the suggestion box opens before the oData finishes, which is why the example code works - it's a JSON model. My solution looks something like this

 var search = this.byId('searchField');
 var binding = search.getBinding("suggestionItems");

 binding.filter(filters);
 binding.attachEventOnce('dataReceived', _ => search.suggest());