javascript - JQuery UI 自动完成有时不显示所有结果

Question

我正在使用 JQuery UI 进行自动完成，其中我获取输入并使用该输入 ping 服务器，最后创建一个数组以提供给自动完成的源。现在它有时工作得很好，但是当我打印人员数组有时时，并非所有源数据都显示在控制台中显示的屏幕上。

let input =$("<input type='text'/>")
  .appendTo('#dynamic-form-elements'); 
  input.autocomplete({
     source: [] // Initially empty
  }).on('input', function () {
    $.ajax({
        url: "https://lookmeup/json/person/" + input.val(),
        dataType: "json",
        success: function (parsed_json) {
            let people = [];
            let results = parsed_json.data;
            for (i = 0; i < results.length; i++) {
                people.push(results[i][1])
            }
            console.log(people)
            input.autocomplete('option', 'source', people);
        }
    });
})

Answer 1

您需要在自动完成中包含“minLength:”属性，以便它会等到您达到最小长度后再执行 ajax。

您可以在这里看到它的使用: https://jqueryui.com/autocomplete/#remote-jsonp

最终的代码应如下所示:

input.autocomplete({
    source: function(req, response) {
        $.ajax({
            url: "https://lookmeup/json/person/" + req.term,
            dataType: "json",
            success: function (parsed_json) {
               // do the stuff here and call response callback
            }
        });
    },
    minlength: 3
})