BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] 配列の変更に伴う剣道Uiのオートコンプリートの更新/リフレッシュ

2022-02-28 01:08:10

質問

私は、標準的な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();

解決方法は？

で新しいデータを設定することもできます。 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>

道場

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します