无法显示自动完成更新的源列表

Question

我尝试更新Autocomplete的来源，但是更新后，它无法显示来源列表？我在这里做错了什么吗？这是我的设置：

let cities = [
    {"label":"Alessandria","id":"AL"},
    {"label":"Milano","id":"MI"},
    {"label":"Pisa","id":"PI"},
    {"label":"Pistoia","id":"PT"}
];

test_auto_c(cities); //For the first time, set up autocomplete.

$("#btn1").click(() => {
    let arr = [
        {"lable": "Changed1-1", "id": "1"},
        {"lable": "Changed1-2", "id": "2"},
        {"lable": "Changed1-3", "id": "3"}
    ];
    $("#autocomplete-city").autocomplete('option', 'source', arr); //change the source
});
$("#btn2").click(() => {
    let arr = [
        {"lable": "Changed2-1", "id": "4"},
        {"lable": "Changed2-2", "id": "5"},
        {"lable": "Changed2-3", "id": "6"}        
    ];
    $("#autocomplete-city").autocomplete('option', 'source', arr); //change the source
});

下面是test_auto_c()的函数：

function test_auto_c(arr){
    $("#autocomplete-city").autocomplete({
        source: arr,
        minLength: 0,
        select: function(event, ui){
          if(ui.item){
            return ui.item.label;
          }
          else{}
        },
        change: function(event, ui){
          var searched = this.value;
          if(ui.item){

          }
          else{
            var result = arr.filter(function( obj ) {
              return obj.label.toLowerCase().indexOf(searched.toLowerCase()) !== -1;
            });
            if(result.length>0){
              $(this).val(result[0].label);
            }
            else{
              //clear the autocomplete
              let final_value = arr[0].label;
              $(this).val(final_value);
            }
          }
        }
      }).focus(function () {
        $(this).autocomplete("search");
    });
}

最后，在我尝试更改源后，它给了我空列表的结果。

我期望的显示如下：

我正在使用：

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

Answer 1

首先你必须查看文档：

支持多种类型：

数组：数组可以用于本地数据。支持两种格式：

字符串数组：[ "Choice1", "Choice2" ]
具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]

它似乎有效，但当您稍后更改源时，它不起作用。这是由于打字错误，您需要 "label".

的地方有 "lable"

$(function() {
  function test_auto_c(arr) {
    $("#autocomplete-city").autocomplete({
      source: arr,
      minLength: 0
    }).focus(function() {
      $(this).autocomplete("search");
    });
  }

  let cities = [{
      "label": "Alessandria",
      "id": "AL"
    },
    {
      "label": "Milano",
      "id": "MI"
    },
    {
      "label": "Pisa",
      "id": "PI"
    },
    {
      "label": "Pistoia",
      "id": "PT"
    }
  ];

  test_auto_c(cities);

  $("#btn1").click(() => {
    let arr = [{
        "label": "Changed1-1",
        "id": "1"
      },
      {
        "label": "Changed1-2",
        "id": "2"
      },
      {
        "label": "Changed1-3",
        "id": "3"
      }
    ];
    $("#autocomplete-city").autocomplete('option', 'source', arr); //change the source
  });
  $("#btn2").click(() => {
    let arr = [{
        "label": "Changed2-1",
        "id": "4"
      },
      {
        "label": "Changed2-2",
        "id": "5"
      },
      {
        "label": "Changed2-3",
        "id": "6"
      }
    ];
    $("#autocomplete-city").autocomplete('option', 'source', arr); //change the source
  });

});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<div>
  <input type="text" id="autocomplete-city"> 
  <button id="btn1">Btn 1</button> 
  <button id="btn2">Btn 2</button> 
</div>

无法显示自动完成更新的源列表

Cannot show the Autocomplete updated source list

javascript

jquery

jquery-ui

autocomplete

jquery-ui-autocomplete