搜索 kendo 多选而不向多选添加值

Question

背景： 我有一个 kendo multiselect，它根据 kendo 下拉列表的值填充了电子邮件。我还需要使用 multiselect 到 'search' 通过我们的员工 api 发送更多电子邮件。然后，当我搜索并 select 新值添加到 multiselect 的 'selected values' 部分时，我希望能够返回并查看没有搜索值的初始填充值。

免责声明： 除了搜索值 'added' 到我不想要的数据源之外，我可以让所有这些工作。搜索时想想临时数据源。因此，当我查看初始填充值时，返回的搜索值会附加到数据源值。再一次，我不想要这个。

代码：

<div class="row display-row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <h4>Location Group:</h4>
                @(Html.Kendo().DropDownList()
                .Name("weatherLocGroupNameDropDown")
                .HtmlAttributes(new { style = "width:100%" })
                .OptionLabel("Select location group...")
                .DataTextField("LocationGroupName")
                .DataValueField("LocationGroupId")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("getLocationGroupNames", "Base");
                    });
                })
            )
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <h4>Location:</h4>
            @(Html.Kendo().DropDownList()
                .Name("weatherLocNameDropDown")
                .HtmlAttributes(new { style = "width:100%" })
                .OptionLabel("Select location...")
                .DataTextField("LocationName")
                .DataValueField("LocationId")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("getLocationNamesFilteredByLocationGroup", "Base")
                            .Data("filterLocation");
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .Events(ev => ev.Change("populateLocGrpEmails")) 
                .CascadeFrom("weatherLocGroupNameDropDown")
            )
        </div>


    <div class="row display-row">
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
            @(Html.Kendo().MultiSelect()
                .Name("recipientMultilist")
                .Placeholder("Recipient(s)")
                .AutoBind(false)
                .Enable(false)
                .HtmlAttributes(new { style = "width:100%" })
                .DataTextField("EmailName")
                .DataValueField("EmailId")
            .Events(ev => ev.Filtering("searchEmails"))
            )
        </div>
    </div>


function searchEmails() {
    var searchText = $("#recipientMultilist").data('kendoMultiSelect').input.val();

    searchText = searchText.trim();
    if (searchText.length >= 3 && searchText != undefined && searchText != "") {
        $.ajax(
            {
                url: "@Url.Action("getRecipientEmails", "Base")",
                data: { searchTerm: searchText },
                type: "GET",
                dataType: "json",
                async: false,
                success: function (searchEmail) {
                    if (searchEmail.length > 0) {
                        for (var i = 0; i < searchEmail.length; i++) {
                            $('#recipientMultilist').data("kendoMultiSelect").dataSource.add({
                                EmailName: searchEmail[i].EmailName,
                                EmailId: searchEmail[i].EmailId
                            });
                        }
                    }
                }, error: function (searchEmailErr) { console.log('searchEmailErr: ', searchEmailErr); }
            })
        }
}

function getLocationGroupEmails() {
    return {
        LocationGroupId: $("#weatherLocGroupNameDropDown").data("kendoDropDownList").value()
    }
}

function filterLocation() { 
    return {
        LocationGroupId: $("#weatherLocGroupNameDropDown").data("kendoDropDownList").value()
    };
}

function populateLocGrpEmails() {
    $("#recipientMultilist").data("kendoMultiSelect").enable();
    tempMultiListStorage = [];

    var locationText = $("#weatherLocNameDropDown").data('kendoDropDownList').text();
    var locationGroupId = $("#weatherLocGroupNameDropDown").data('kendoDropDownList').value()

    //get all emails associated with the location group and inserts into the recipientMultilist
    $.ajax(
        {
            url: "@Url.Action("getEmailFilteredByLocationGroup", "Base")",
            data: { LocationName: locationText, LocationGroupId: locationGroupId },
            type: "GET",
            dataType: "json",
            async: false,
            success: function (filteredEmail) {
                if (filteredEmail.length > 0) {
                    for (var i = 0; i < filteredEmail.length; i++) {
                        $('#recipientMultilist').data("kendoMultiSelect").dataSource.add({
                            EmailName: filteredEmail[i].EmailName,
                            EmailId: filteredEmail[i].EmailId
                        });

                        tempMultiListStorage.push({
                            EmailName: filteredEmail[i].EmailName,
                            EmailId: filteredEmail[i].EmailId })
                    }
                }
            }, error: function (filteredEmailErr) { console.log('filteredEmailErr: ', filteredEmailErr); }
        })

    var multiselect = tempMultiListStorage



    //"selects" the record that matches the location
    var dropdownlist = $("#recipientMultilist").getKendoMultiSelect();
    dropdownlist.value(locationText)
    dropdownlist.trigger("change");
}

我知道 searchEmails 中的这段代码

    $('#recipientMultilist').data("kendoMultiSelect").dataSource.add({
                            EmailName: searchEmail[i].EmailName,
                            EmailId: searchEmail[i].EmailId
                        });

正在将值添加到 multiselect 但就是这样，所以我至少可以测试一些其他的东西。同样，我正在寻找 'see' 搜索值，select 搜索值，但不会通过添加它们使它们成为 'datasource' 的一部分。

我希望这是清楚的哈哈。

Answer 1

你能试试看是否有效吗:

$("#multiselect").kendoMultiSelect({
  select: function(e) {
      e.preventDefault();
  }
});

搜索 kendo 多选而不向多选添加值

search kendo multiselect without adding values to multiselect

javascript

c#

kendo-ui

kendo-asp.net-mvc