Tabular Suggestion for sap.m.Input in SAPUI5

Question

I'm trying to create a autocomplete function for a text field. My situation is that I have a Dialog using xml fragment which contains a sap.m.Input text field:

<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>

In my controller, I create a model and set to the 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();

I cannot manage to setup this autocomplete function. I tried to hardcode the text in suggestionRows to hard text and remove the property SuggestionRows in xml fragment then it worked. But of course I need the dynamic dataset loaded from a model or sort of.

<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>

Any help please,

Best regards

Answer 1

For Tabular suggestion you can refer below code:

XML Code :

        <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 Code :

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