auto complete search in jquery

Question

I have bind datalist in Input type, for auto complete. Its working fine when small anount of data, but web page get not responding on large amount of data. Please suggest me if any other way to bind.

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

Howdy. How many items do you append? I think you should limit them in the API — Damian Dziaduch, Dec 04 '18 at 11:52
in response we are getting only 341 rows after parseJSON(response) — raj, Dec 04 '18 at 11:55
Why do you need 341 rows in the autocomplete? I think 10-25 items is max what user needs — Damian Dziaduch, Dec 05 '18 at 08:54
How will you even display 341 items for the user to select from? Limit the results to 10-20 items, and either paginate or require more characters to filter further. — Don't Panic, Dec 05 '18 at 09:53

score -1 · Answer 1 · answered Dec 04 '18 at 13:52

-1

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

answered Dec 04 '18 at 13:52

Ramesh

1,829
2
25
30

auto complete search in jquery

1 Answers1