CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdjango
KhoPhi
KhoPhi

Reputation: 9517

jquery ui autocomplete results doesn't show in html dropdown

This is my django view ajax request function:

def get_town(request):
    if request.is_ajax():
        q = request.GET.get('term', '')
        towns = Town.objects.filter(name__icontains=q)
        results = []
        for name in towns:
            name_json = {}
            name_json['name'] = name.name
            results.append(name_json)
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

Urls and everything setup nicely.

My autocomplete is this:

$(function() {
  $("#id_town").autocomplete({
    source: "/api/get_town/",
    minLength: 3,
  });
});

However, you can see from image below that the results although is returned and available from the request, doesn't display in the dropdown. As per the entered keys in input box in the image below, the results I got was this: [{"name": "Densuano"}]

What's the problem then? Why isn't the dropdown showing?

enter image description here

Upvotes: 1

Views: 1750

Answers (1)

KhoPhi
KhoPhi

Reputation: 9517

I figured out:

name_json['name'] = name.name

was the culprit. The above was making a key, value list which the autocomplete, somehow couldn't interpret. I changed to

name_json = name.name

and it worked.

Upvotes: 2

Related Questions