替代

Question

是否有控件支持SAP UI5中的标记？像 Tag-it 之类的东西会将你的标记词变成像widget一样的按钮，类似于我们在Stack Overflow中添加标记时看到的内容。

我想允许用户在帖子中添加标签。如果它退出，请指向控件。如果没有，我如何在我的代码中使用 Tag-it ？

Answer 1

使用可容纳一个或多个sap.m.Tokenizer的{{1}}

请参阅https://sapui5.hana.ondemand.com/sdk/explored.html#/entity/sap.m.Tokenizer/samples

Answer 2

也许您可以在帖子中添加一个名为“标签”的新字段，并允许用户在其中添加字词。如果您想搜索标签，只需搜索包含该字段。如果您找不到实际的小部件，只是一个建议。

Answer 3

像Tag-it之类的东西会将你的标记词变成像widget一样的按钮，类似于我们在Stack Overflow中添加标记时所看到的内容。

我猜你正在寻找的是sap.m.MultiInput，其行为类似于Stack Overflow上的 Tags 输入字段：

实施

该控件有一个名为<tokens>的聚合，可以添加 n - sap.m.Token。
它还提供API addValidator等待函数在创建新令牌之前验证用户输入。当用户按 Enter ，从建议下拉列表中选择一个值，或者焦点离开该字段时，将执行该功能。
当即将添加新令牌但已经存在相同的令牌时，将不会添加新令牌。

演示

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/layout/form/SimpleForm",
  "sap/m/Label",
  "sap/m/MultiInput",
  "sap/m/Token",
], (SimpleForm, Label, MultiInput, Token) => {
  const multiInput = new MultiInput().setShowValueHelp(false);
  multiInput.addValidator(args => new Token({
    key: args.text.trim(),
    text: args.text.trim(),
  }));
  new SimpleForm({
    title: "sap.m.MultiInput",
    content: [
      new Label().setText("Tags"),
      multiInput,
    ],
    layout: "ResponsiveGridLayout",
    editable: true,
  }).placeAt("content");
}));

<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-xx-waitForTheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

^{API reference: sap.m.MultiInput}

替代

作为替代控件，根据项目可能更合适，可以使用MultiComboBox。

^{API reference: sap.m.MultiComboBox}

具有标记支持的输入控制

3 个答案:

实施

演示

替代