Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.6k views
in Technique[技术] by (71.8m points)

xml - SAPUI5 Search Field Suggestion Autocomplete

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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());

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...