0

我有一个标准的 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();
4

2 回答 2

2

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

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

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

于 2020-10-21T22:39:10.863 回答
1

您也可以尝试使用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>

道场

于 2020-10-22T17:23:54.423 回答