Question

我正在尝试为文本字段创建自动完成功能。我的情况是我有一个使用xml片段的Dialog，其中包含一个sap.m.Input文本字段：

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" displayBlock="true" controllerName="SaleHelper.controller.SimpleForm">
<Dialog id="AddOrderDialog" title="{i18n>AddOrderDialog_Title}">
    <buttons>
        <Button class="closebtn" text="{i18n>close}" id="__button2" press="cancel"/>
        <Button text="Ok" enabled="false"/>
    </buttons>
    <content>
        <Input id="_txtCustomerName" placeholder="{i18n>customername}" 
        showSuggestion="true" suggest="suggest" suggestionRows="{/customerset}">
            <suggestionColumns>
                <Column 
                    hAlign="Begin"
                    popinDisplay="Inline"
                    demandPopin="true">
                    <Label text="{i18n>customername}"/>
                </Column>
                <Column
                    hAlign="Center"
                    popinDisplay="Inline"
                    demandPopin="true"
                    minScreenWidth="Tablet">
                    <Label text="{i18n>address}"/>
                </Column>
                <Column
                    hAlign="End"
                    popinDisplay="Inline"
                    demandPopin="true">
                    <Label text=" {i18n>phoneno}"/>
                </Column>
            </suggestionColumns>
            <suggestionRows>
                <ColumnListItem>
                <cells>
                    <Label text="{customername}"/>
                    <Label text="{phoneno}"/>
                    <Label text="{address}"/>
                </cells>
                </ColumnListItem>
            </suggestionRows>
        </Input>
    </content>
</Dialog>

在我的控制器中，我创建了一个模型并设置为Dialog：

var dialog = this.getView().byId("AddOrderDialog");
        var dummyController = {
            suggest: function(oEvent) {
            }
        };
        if (!dialog) {
            dialog = new sap.ui.xmlfragment(this.getView().getId(), "SaleHelper.fragment.AddOrderDialog", dummyController);
            var data = {
                    "customername": "A",
                    "phoneno": "0933644118",
                    "address": "96 CT"
            };
            var AutoCompleteModel = new sap.ui.model.json.JSONModel();
            AutoCompleteModel.setData(data);
            dialog.setModel(AutoCompleteModel);
            var i18nModel = this.getView().getModel("i18n");
            dialog.setModel(i18nModel, "i18n");
        }
        dialog.open();

我无法设置此自动完成功能。我试图将suggestionRows中的文本硬编码为硬文本并删除xml片段中的属性SuggestionRows然后它起作用。但是我当然需要从模型或类型中加载动态数据集。

<Input id="_txtCustomerName" placeholder="{i18n>customername}" 
        showSuggestion="true" suggest="suggest" >
<suggestionRows>
            <ColumnListItem>
            <cells>
                <Label text="harded-text"/>
                <Label text="harded-text"/>
                <Label text="harded-text"/>
            </cells>
            </ColumnListItem>
        </suggestionRows>

请帮忙，

祝你好运

Answer 1

对于表格建议，您可以参考以下代码：

XML代码：

        <Input
                id="productInput"
                type="Text"
                placeholder="Enter Product ..."
                showSuggestion="true"
                showTableSuggestionValueHelp="false"
                suggestionRows="{/ProductCollection}">
                <suggestionColumns>
                    <Column
                        hAlign="Begin"
                        popinDisplay="Inline"
                        demandPopin="true">
                        <Label text="Name"/>
                    </Column>
                    <Column
                        hAlign="Center"
                        popinDisplay="Inline"
                        demandPopin="true"
                        minScreenWidth="Tablet">
                        <Label text="Product ID"/>
                    </Column>
                    <Column
                        hAlign="Center"
                        popinDisplay="Inline"
                        demandPopin="false"
                        minScreenWidth="Tablet">
                        <Label text="Supplier Name"/>
                    </Column>
                    <Column
                        hAlign="End"
                        popinDisplay="Inline"
                        demandPopin="true">
                        <Label text="Price"/>
                    </Column>
                </suggestionColumns>
                <suggestionRows>
                    <ColumnListItem>
                    <cells>
                        <Label text="{Name}"/>
                        <Label text="{ProductId}"/>
                        <Label text="{SupplierName}"/>
                        <Label text="{Price}"/>
                    </cells>
                    </ColumnListItem>
                </suggestionRows>
            </Input>

JS代码：

var oInputJSON = new sap.ui.model.json.JSONModel();
            var Data = {
                    ProductCollection : [{
                            Name         : 'a',
                            ProductId    : '1',
                            SupplierName : 'ab',
                            Price        : '12'
                        },{
                            Name         : 'b',
                            ProductId    : '2',
                            SupplierName : 'ab',
                            Price        : '12'
                    }]
                };
            oInputJSON.setData(Data);
            this.getView().byId("productInput").setModel(oInputJSON);

SAPUI5中sap.m.Input的表格建议

1 个答案: