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

希望有帮助。

Answer 2

您应该这样做，使用source作为函数：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
            }
        });
    }
})

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

2 个答案: