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

问题描述

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

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',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>

解决方法

首先您必须查看文档：

支持多种类型：

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

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

它似乎有效，当您稍后更改源时，它不起作用。这是由于打字错误造成的，您在需要 "lable" 的地方有 "label"。

$(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',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>