SAPUI5多值输入demo

使用sap.m.MultiInput

view代码

<mvc:View displayBlock="true" controllerName="ui5.walkthrough.controller.App" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"> <f:SimpleForm editable="true" layout="ResponsiveGridLayout"> <f:content> <!-- 第一行 --> <Label text="物料编码" /> <MultiInput id="multiInput1" showValueHelp = "false" width="300px" /> <!-- 第二行：插入一个空 Label 强制换行 --> <Label text="" /> <Button text="查询" press="onPressSearch" width="100px"> <layoutData> <l:GridData span="L2 M3 S12" /> </layoutData> </Button> </f:content> </f:SimpleForm> </mvc:View>

controller代码

sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast", 'sap/m/Token' ], (Controller, MessageToast, Token) => { "use strict"; return Controller.extend("ui5.walkthrough.controller.App", { /** * @override * @returns {void|undefined} */ onInit: function () { var oView = this.getView(); // add validator var fnValidator = function (args) { var text = args.text; return new Token({ key: text, text: text }); }; var oMultiInput1 = oView.byId("multiInput1"); oMultiInput1.addValidator(fnValidator); }, onPressSearch: function (oEvent) { var oMultiInput = this.getView().byId("multiInput1"); var aTokens = oMultiInput.getTokens(); var aSelectedKeys = aTokens.map(function (oToken) { return oToken.getKey(); }); MessageToast.show("物料编码输入值: " + aSelectedKeys.join(", ")); } }); });

效果