在 jquery 中自动完成搜索答案

【问题标题】：auto complete search in jquery在 jquery 中自动完成搜索
【发布时间】：2019-05-05 20:14:51
【问题描述】：

我在输入类型中有绑定数据列表，用于自动完成。它在少量数据时工作正常，但网页对大量数据没有响应。如果有其他绑定方式，请建议我。

<input type="text" class="form-control" id="drp" list="datalst"/>
<datalist id="datalst"></datalist>

$.ajax({
    type: "POST",
    url: Urldata,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(obj),
    success: function (response) {
        $("#datalst").html('');
        if (response != null) {
            if (response.length > 0) {
                Resultdata = "";
                var lst= $.parseJSON(response);
                $.each(lst, function () {
                    Resultdata += "<option data-id='" + this.ID + "' value='" + this.value + "'>";
                });
                $("#datalst").append(Resultdata);  // **taking time to appned**
            }
        }
    }, error: function (jqXHR, textStatus, errorThrown) {
        if (jqXHR.status == 500) {
            console.log(jqXHR.responseText);
        } else {
            alert('Unexpected error.');
        }
    }
});

【问题讨论】：

你好。你追加了多少项目？我认为你应该在 API 中限制它们
作为响应，我们在 parseJSON(response) 之后只得到 341 行
这个 ajax 调用只有在输入类型的 3 个字符后才会触发
为什么自动完成需要 341 行？我认为用户需要最多 10-25 件商品
如何显示 341 项供用户选择？将结果限制为 10-20 项，然后分页或需要更多字符来进一步过滤。

标签： jquery

【解决方案1】：

$.each(lst, function () {
     $("#datalst").append($('<option></option>').val(this.value).data('id',this.ID));
});

【讨论】：