Question

背景：我有一个kendo multiselect，可以根据kendo下拉列表的值来填充电子邮件。我还需要使用multiselect通过我们的员工api“搜索”其他电子邮件。然后当我搜索并选择要添加到多选的“选定值”部分的新值时，我希望能够返回并查看没有搜索值的初始填充值。

免责声明：除了将搜索到的值“添加”到我不想要的数据源之外，我可以完成所有这些工作。在搜索时考虑临时数据源。因此，当我查看初始填充值时，返回的搜索值将附加到数据源值。再一次，我不想要这个。

代码：

<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，但那就是那里我至少可以测试一些其他的东西。同样，我希望“看到”搜索到的值，选择搜索值，但不要通过添加它们使它们成为“数据源”的一部分。

我希望这很清楚哈哈。

Answer 1

你可以尝试一下，看看它是否有效：

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

搜索kendo multiselect而不向多选

1 个答案: