input tabular suggestions js

Question

I was stuck on getting things working for input tabular suggestions. The problem is that I want to create the input field inside the controller. I found this example, but it is using the XML view for creating the field.

I tried to convert the example to JS, but I really had a lot of errors starting with suggestion rows and columns. How should I implement this? This is what I have tried:

new sap.m.Input({
    visible: "{= ${UserId} === '' ? true : false}",
    /*  showValueHelp="true",*/
    showSuggestion: true,
    valueHelpRequest: "onManageServiceOwners",
    suggest: "handleInputSuggest",
    /* suggestionRows: "{ path: 'serviceDetailsModel>/SuggestedServiceOwners' }",*/
    suggestionRows: sap.m.input.insertSuggestionRow(item, -1) ,
    suggestionColumns: sap.m.input.insertSuggestionColumn(oSuggestionColumn,  -1),
    submit: (this.onSubmitOwnerId).bind(this)
})

Answer 1

Inside an XML View, you have it in the SDK samples.

Using JS + XML view you can find here a working demo and the snippet:

var oInput = new sap.m.Input({
    showSuggestion: true,
    showTableSuggestionValueHelp: false,
    suggestionColumns: [
        new sap.m.Column({
            label: new sap.m.Label({ text: "Name" })
        }),
        new sap.m.Column({
            label: new sap.m.Label({ text: "ProductId" })
        }),
        new sap.m.Column({
            label: new sap.m.Label({ text: "SupplierName" })
        })
    ],
    suggestionRows: {
        path: "/ProductCollection",
        template: new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text: { path: "Name" }
                }),
                new sap.m.Text({
                    text: { path: "ProductId" }
                }),
                new sap.m.Text({
                    text: { path: "SupplierName" }
                })
            ]
        })
    },
});