SAPUI5搜索字段建议自动完成 [英] SAPUI5 Search Field Suggestion Autocomplete

问题描述

我正在开发SAPUI5应用程序.我要实现的是在搜索字段中自动完成建议列表.例如，当我输入"app"时， 我将列出苹果，应用程序"的建议.建议列表是从xsodata Web服务中检索的.

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.

我在我的SAPUI5中使用enableSuggestions和proposalionItems，但是它根本不起作用.以下是我的示例代码.

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

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

有人可以帮我吗?

推荐答案

odata服务存在计时问题，并且会弹出建议.以前也把我吸引住了.从技术上讲，建议框会在oData完成之前打开，这就是示例代码起作用的原因-它是JSON模型.我的解决方案看起来像这样

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

这篇关于SAPUI5搜索字段建议自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！