JQuery UI 自動完成有時不會顯示所有結果

Question

我正在使用 JQuery UI 進行自動完成，其中我接受輸入並使用該輸入 ping 服務器並最終創建一個數組以提供給自動完成源。 現在它有時可以完美運行，但是當我打印 people 數組時，有時並非所有源數據都顯示在控制台中顯示的屏幕上。

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
})

Answer 2

你應該這樣做，使用源作為函數： https : //jqueryui.com/autocomplete/#remote

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
            }
        });
    }
})