Question

我试图用kendoMultiSelect实现类似于this jQuery插件的东西。

用户可以从下拉列表中选择一个值，也可以输入一个新值。如果输入新值，则多选将显示它，就好像从列表中选择了一样（外观相同）。

我尝试实现这一点是in this jsfiddle。首先，我允许用户输入一个新值（按Enter键），然后将其添加到数据源，最后将其添加到选定的值。问题是多选对象的行为很奇怪：如果首先选择一个值，然后输入一个新值，则先前选择的值将消失。如果您使用它来选择和输入值，您将会看到其他奇怪的行为。

这是HTML：

<select id="seltags" />

这是Javascript：

var data = [
    { text: "Africa" },
    { text: "Europe" },
    { text: "Asia" },
    { text: "Australia" }
];

multi = $("#seltags").kendoMultiSelect({
    dataTextField: "text",
    dataValueField: "text",
    placeholder: "Select or enter tags",
    dataSource: data
}).data("kendoMultiSelect");


$('.k-input').keydown ( function(e) {
    var code = e.keyCode || e.which;
    if (code == 13) {  // user pressed enter
        var entered = $('.k-input').val();
        multi.dataSource.add({ text: entered });
        var selected = multi.value();
        console.log("before: "+selected);
        selected.push(entered);
        console.log("after: "+selected);
        multi.value(selected);
    }
});

有什么想法吗？

Answer 1

使用数据源进行多选，这样您就可以在添加/删除项目的同时使用事件数据绑定。最后，您需要修改其select事件以清理数据源。

这是我的implementation。希望能帮到你。

Answer 2

Kendo现在提供MultiSelect功能。请看一下。 http://demos.telerik.com/kendo-ui/multiselect/index

kendoMultiSelect：除了从下拉列表中选择外，还允许输入值

2 个答案: