jquery - Kendo UI 标签输入

Question

我需要一个简单的输入来输入标签。 MultiSelect 不允许我输入临时输入。它似乎只允许选择下拉列表中已有的项目。

http://demos.telerik.com/kendo-ui/multiselect/tag-mode

我试过AutoComplete 。它允许逗号分隔输入，但没有带有每个标签的关闭图标的 CSS 标签。

this page中的控件是我需要的。但它适用于 ASP.net AJAX。我找不到类似的 jQuery 示例

为什么这样一个常见的场景在 Kendo UI 中实现起来如此令人沮丧？

Answer 1

我已经根据我为实现类似目标所做的一些代码准备了一个示例道场:

http://dojo.telerik.com/orePO

这里发生了很多事情。但本质上，这将加载您现有的“标签”列表，如果找不到输入的值，那么它将提示用户将其添加到集合中。

这里重要的一点是:

 function addTag(widgetId, value) {
        var widget = $('#' + widgetId).getKendoMultiSelect();
        var dataSource = widget.dataSource;
        var item = { ProductID: 0, ProductName: value };
        dataSource.add(item);
        widget.value(widget.value().concat([item.Value]));

        dataSource.one("requestEnd", function(args) {
                    if (args.type !== "create") {
                        return;
                    }

                    var newValue = args.response[0].ProductID;

                    dataSource.one("sync", function() {
                        widget.value(widget.value().concat([newValue]));
                    });
                });

                dataSource.sync();



        var values = widget.dataItems();

        updateTagList(values);


        return;

    }

此函数是从此处定义的 NoDataTemplate 模板调用的:

   <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            No data found. Do you want to add new item - '#: instance.input.val() #' ?
        </div>
        <br />
        <button class="k-button" onclick="addTag('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
    </script>

因此，当用户键入未找到的内容时，它会提示用户将该项目添加到集合中。

然后我添加了一些脚本来显示列表下方的标签(这样您就可以看到它们被添加。所以我不会在这里详细介绍。)

我还配置了该控件以隐藏一个 tag 元素下的所有标签，以便多选不会意外增长。这可以通过多选的 tagMode 选项进行更改。

请注意，此选项自 2016 年第三季度以来才出现(据内存)

如果您需要任何其他解释/扩展，请告诉我。

另请参阅此功能的演示:http://demos.telerik.com/kendo-ui/multiselect/addnewitem