Jquery автозаполнение без фильтрации JSON данные из django - PullRequest
Новая
       24

Jquery автозаполнение без фильтрации JSON данные из django

0 голосов
/ 22 марта 2020

Я попробовал автозаполнение Jquery для ввода названия страны в поле ввода. Вместо этого он связывает все данные JSON и поиск не фильтрует данные JSON.

JQUERY Функция автозаполнения для страны 

$("#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 ДАННЫЕ 

{"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"}]

Пожалуйста, помогите мне с решением.

1 Ответ

0 голосов
/ 22 марта 2020

Я бы предложил следующее. 

$("#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();
  },
});

Вы можете использовать фильтр $.ui.autocomplete.filter() таким же образом. В противном случае вам придется отфильтровать Python, сократив количество отправляемых элементов, что будет лучше. Или вы можете сделать свой собственный фильтр с такими вещами, как .indexOf().

...