updating/refreshing kendo ui 自动完成数组更改

Question

我有一个标准的 jquery kendo ui 自动完成，足够简单启动：

    let querCo = [];
    ...........
    $.each(lRsp, function(i, value) {
         querCo.push(value[id]);
    });

   $("#agent").kendoAutoComplete({
        dataSource: querCo,
        serverFiltering: true, // this was also an attempt
        select: function(e) {
                let item = e.item;
                text = item.text();
                // console.log(text);
        }
    });

一切都很好，除了尝试更新它...例如，我有一个删除按钮，目的是删除所选项目；我得到了选定的项目，并在 querCo 更新数组并从数组中删除该项目。但是自动完成仍然显示它....

 $('#del').click(function(){
    let val = text;
    querCo = $.grep(querCo, function(value) {
      return value != val;
  });
  console.log(querCo); // correct, outputs updated array

那下面两种我都试过了；貌似什么都没做...原来的数组，唉删除的项目，仍然显示在自动完成中？

尝试 1

$("#agent").data("kendoAutoComplete").dataSource.read();

尝试 2

$("#agent").data("kendoAutoComplete").refresh();

Answer 1

我相信您使用的方法是 setDataSource 来替换自动完成绑定到的数据源：

$("#agent").data("kendoAutoComplete").setDataSource(querCo);

https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete/methods/setdatasource

Answer 2

您也可以尝试使用data方法设置新数据：

$("#agent").data("kendoAutoComplete").dataSource.data(querCo);

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/autocomplete/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    
        <div id="example">
            <div class="demo-section k-content">
                <h4><label for="countries">Choose shipping countries:</label></h4>
                <input id="countries" style="width: 100%;" />
                <div class="demo-hint">Start typing the name of an European country</div>
              
              <button id="remove" type="button">Remove Countries starting with "A"</button>
            </div>

            <script>
                $(document).ready(function () {
                    var data = [
                            "Albania",
                            "Andorra",
                            "Armenia",
                            "Austria",
                            "Azerbaijan",
                            "Belarus",
                            "Belgium",
                            "Bosnia & Herzegovina",
                            "Bulgaria",
                            "Croatia",
                            "Cyprus",
                            "Czech Republic",
                            "Denmark",
                            "Estonia",
                            "Finland",
                            "France",
                            "Georgia",
                            "Germany",
                            "Greece",
                            "Hungary",
                            "Iceland",
                            "Ireland",
                            "Italy",
                            "Kosovo",
                            "Latvia",
                            "Liechtenstein",
                            "Lithuania",
                            "Luxembourg",
                            "Macedonia",
                            "Malta",
                            "Moldova",
                            "Monaco",
                            "Montenegro",
                            "Netherlands",
                            "Norway",
                            "Poland",
                            "Portugal",
                            "Romania",
                            "Russia",
                            "San Marino",
                            "Serbia",
                            "Slovakia",
                            "Slovenia",
                            "Spain",
                            "Sweden",
                            "Switzerland",
                            "Turkey",
                            "Ukraine",
                            "United Kingdom",
                            "Vatican City"
                        ];

                    //create AutoComplete UI component
                    $("#countries").kendoAutoComplete({
                        dataSource: data,
                        filter: "startswith",
                        placeholder: "Select country...",
                        separator: ", "
                    });
                  
                  $("#remove").on("click", function() {
                    let newData = data.filter(item => item[0] !== "A");
                    
                    $("#countries").data('kendoAutoComplete').dataSource.data(newData);
                  });
                });
            </script>
        </div>
</body>
</html>

Dojo

updating/refreshing kendo ui 自动完成数组更改

updating/refreshing kendo ui autocomplete with array change

javascript

jquery

kendo-ui

kendo-autocomplete