multi input with customized suggestion

Question

I am looking for displaying the suggestions in a table like format (three fields userID firstname lastname). I found this example, but it is with simple input when i tried with multi input I got this error:

Error: failed to load 'null/suggestionColumns.js' from resources/null/suggestionColumns.js: 404 - Not Found"

Answer 1

The sap.m.MultiInput class is a subclass of the regular sap.m.Input class. Unless otherwise specified in the SDK, all the mechanisms that work for the regular input should work for the multi input as well.

Looking at the error message that you get, I imagine that you did not specify the correct XML namespace for the suggestionColumns aggregation tag. You should use the namespace for the sap.m library (i.e. the exact same namespace as for the MultiInput XML tag).

You can find a working sample for the sap.m.Input in the SDK. A minimalistic sample can be created purely in an XML view with the following definition:

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
    <MultiInput showSuggestion="true" >
        <suggestionColumns>
            <Column>
                <Label text="First Name"/>
            </Column>
            <Column>
                <Label text="Last Name"/>
            </Column>
        </suggestionColumns>
        <suggestionRows>
            <ColumnListItem>
                <Label text="John"/>
                <Label text="Doe"/>
            </ColumnListItem>
            <ColumnListItem>
                <Label text="Jack"/>
                <Label text="White"/>
            </ColumnListItem>
            <ColumnListItem>
                <Label text="Some"/>
                <Label text="Guy"/>
            </ColumnListItem>
        </suggestionRows>
    </MultiInput>
</mvc:View>

By default, when the user presses a suggestion row, nothing happens. To attach a behaviour to this selection event, you can use the suggestionItemSelected event (inherited from the sap.m.Input control).

The callback for this event for the above example could look like:

onSelection: function(oEvent) {
   var aCells = oEvent.getParameter("selectedRow").getCells();
   oEvent.getSource().addToken(new sap.m.Token({
     key: aCells[1].getText(),
     text: aCells[0].getText()
   }));
}

I have made a small fiddle with these samples, you can access it here: https://jsfiddle.net/a0bk8kub/11/.