SAPUI5 sap.m.Input - 建议值

Question

如何通过从我的 odata 服务读取我 table 中的单个单元格启用实时建议？

oTable.addColumn(new sap.ui.table.Column({
                template : new sap.m.Input({
                    value : column, // also works, its dynamic
                    textAlign : sap.ui.core.TextAlign.Center,
                    inputType : Text,
                    type : sap.m.InputType.Text,
                    showSuggestion : true,
                    liveChange : function() {
                        if (this.getValue().length > 0) {
                            var oModel = new sap.ui.model.json.JSONModel();
                            var value = this.getValue();
                            var serviceUrl = "/sap/opu/odata/SAP/XXXX_SRV/SuggestionsSet/?$filter=startswith(Key,'" + value + "')";
                            oModel.loadData(serviceUrl, null, false, "GET", false, false, null);

                            this.destroySuggestionItems();
                            for (var i = 0; i < oModel.oData.d.results.length; i++) {
                                this.addSuggestionItem(new sap.ui.core.Item({
                                    text: oModel.oData.d.results[i].Key,
                                }));
                            } // everything seems fine, but no Suggestion opens..


                        }
                    },
                }),
                visible : true,
            }));

Answer 1

见explored example。但是，在您的情况下，模型是 ODataModel，但这并不重要...... 正如您在示例代码中看到的，您还可以使用

showSuggestion="true"
suggest="handleSuggest"
suggestionItems="{/ProductCollection}"

然后在处理程序中执行此操作（也从示例中复制）：

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

基本上你 - 创建一个或多个过滤器 - 获取 suggestionItems 聚合的绑定 - 在绑定上调用 .filter(...) 并传递过滤器

无需手动编写代码（即 GET 请求等）。

这里有一个运行示例供您使用 (run via jsbin)，请参见下文。在你的情况下，你所做的就是绑定到

suggestionItems="{path:'/SuggestionSet', templateShareable:false}">

在 handleSuggest 处理程序中，您将获得属于 SuggestionSet 的 Key 属性的值current/corresponding 输入字段以实例化一个新的过滤器。我猜你可以从 BindingContext 得到 Key...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->

            <!-- XMLView -->
            <script id="myXmlView" type="ui5/xmlview">
                <mvc:View
                    controllerName="MyController"
                    xmlns="sap.m"
                    xmlns:core="sap.ui.core"
                    xmlns:mvc="sap.ui.core.mvc">

                    <Table
                        id="myTable"
                        growing="true"
                        growingThreshold="10"
                        growingScrollToLoad="true"
                        busyIndicatorDelay="0">
                        <columns>
                            <Column>
                                <Text text="Customer ID"/>
                            </Column>
                            <Column>
                                <Text text="Company Name"/>
                            </Column>
                        </columns>
                        <items>
                            <!-- filled via bindItems() in controller -->
                        </items>
                    </Table>

                </mvc:View>
            </script>

            <!-- XML Fragment -->
            <script id="myXMLFragment" type="ui5/fragment">
                <core:FragmentDefinition
                    xmlns="sap.m"
                    xmlns:core="sap.ui.core">
                    <ColumnListItem type="Active">
                        <cells>
                            <ObjectIdentifier title="{CustomerID}"/>

                            <Input
                                value="{CompanyName}"
                                showSuggestion="true"
                                suggest="handleSuggest"
                                suggestionItems="{path:'/Customers', templateShareable:false}">
                                <suggestionItems>
                                    <core:Item text="{CompanyName}" />
                                </suggestionItems>
                            </Input>

                        </cells>
                    </ColumnListItem>
                </core:FragmentDefinition>
            </script>


        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";

                //### Controller ###
                sap.ui.controller("MyController", {
                    onInit : function () {

                        this.getView().setModel(
                            new sap.ui.model.odata.v2.ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
                                json : true,
                                useBatch : false
                            })
                        );

                        var sPath = "/Customers";
                        var oTable = this.byId("myTable");
                        var oTemplate =  sap.ui.xmlfragment({
                            fragmentContent : jQuery("#myXMLFragment").html()
                        });

                        oTable.bindItems(sPath, oTemplate, null /*oSorter*/, null /*aFilters*/);
                    },
                    handleSuggest: function(oEvent) {
                        var sTerm = oEvent.getParameter("suggestValue");
                        var aFilters = [];
                        if (sTerm) {
                            aFilters.push(new Filter("CompanyName", sap.ui.model.FilterOperator.StartsWith, sTerm));
                        }
                        oEvent.getSource().getBinding("suggestionItems").filter(aFilters);
                    }
                });

                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");

            });
        </script>

    </head>

    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

SAPUI5 sap.m.Input - 建议值

SAPUI5 sap.m.Input - Suggestion values

input

odata

search-suggestion

sapui5