Jquery autocomplete not filtering JSON data from django

Question

I tried the Jquery autocomplete for entering country name in a input field. Instead it is binding all the JSON data and the search does not filter from the JSON data.

JQUERY Autocomplete function for country

$("#ddlCountry").autocomplete({
        source: function(request, response) {
            $.ajax({
                type: 'GET',
                url: 'country',
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function(data) {
                    console.log(request.term)
                    response($.map(data, function(item, key) {
                        return {
                            label: item.country_name,
                            value: item.id
                        }
                    }));
                },
                error: function(xhr) {
                    console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            e.preventDefault()
        },
        focus: function(event, ui) {
            e.preventDefault()
        },
    });

Views.py

def country_list(request):
    if request.method == "GET":

        if request.is_ajax():
            obj_country_list = Country.objects.values("id", "country_name")
            return HttpResponse(json.dumps(list(obj_country_list)))

JSON DATA

{"id": 1, "country_name": "Afghanistan"},
{"id": 2, "country_name": "Albania"}, 
{"id": 3, "country_name": "Algeria"}, 
{"id": 4, "country_name": "Andorra"}, 
{"id": 5, "country_name": "Angola"}, 
{"id": 6, "country_name": "Antigua and Barbuda"}, 
{"id": 7, "country_name": "Argentina"}, 
{"id": 8, "country_name": "Armenia"}, 
{"id": 9, "country_name": "Australia"}, 
{"id": 10, "country_name": "Austria"}, 
{"id": 11, "country_name": "Azerbaijan"}, 
{"id": 12, "country_name": "Bahamas"}, 
{"id": 13, "country_name": "Bahrain"}, 
{"id": 14, "country_name": "Bangladesh"}, 
{"id": 15, "country_name": "Barbados"}, 
{"id": 16, "country_name": "Belarus"}, 
{"id": 17, "country_name": "Belgium"}, 
{"id": 18, "country_name": "Belize"}, 
{"id": 19, "country_name": "Benin"}, 
{"id": 20, "country_name": "Bhutan"}]

Please help me with a solution.

Answer 1

I would suggest the following.

$("#ddlCountry").autocomplete({
  source: function(request, response) {
    $.ajax({
      type: 'GET',
      url: 'country',
      dataType: "json",
      data: {
        term: request.term
      },
      success: function(data) {
        var result = $.map(data, function(item, key) {
          return {
            label: item.country_name,
            value: item.id
          };
        });
        response($.ui.autocomplete.filter(result, request.term));
      },
      error: function(xhr) {
        console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
      }
    });
  },
  minLength: 2,
  select: function(event, ui) {
    e.preventDefault();
  },
  focus: function(event, ui) {
    e.preventDefault();
  },
});

You can use $.ui.autocomplete.filter() filter in the same way. Otherwise you'd have to filter in Python, reducing the number of items sent back, which would be better. Or you can make your own filter with things like .indexOf().