typeahead.js user query in utf-8

Question

I have the same issue that the one answered here : Transliteration in typeahead.js

But I can't use the workaround in the answer because the list of suggestion is dynamic ! Is there a way to let the user use non-ascii character (é,à,è,ë,etc..) in their query ?

Answer 1

This is the solution a found :

HTML

$('.typeahead').typeahead(
        {
            minLength: 3,
        },
        {
            name: 'place',
            displayKey: 'city',
            source: function (query, process) {
                return $.get("{% url 'profil:search_place_request' search_term='user-query' %}".replace('user-query', query), { query: query }, function (data) { 
                    objects = [];
                    $.each(data, function(i, object) {
                        objects.push({
                            city : object.city,
                            zipcode : object.zipcode,
                            id : object.id,
                        });
                    });
                    return process(objects);
                });
            }
        }
    );

View

@login_required
def search_place_request(request, search_term):
    search_term = search_term.encode("utf-8")
    response, response_dict = selfcare.libs.core.utils.MyAPIRequests.get("place/?term={}".format(search_term))
    if response.ok :
        log.info('[profil] request GET places. Search term : {},  USER : {}'.format(search_term, request.user.username))
        return HttpResponse(json.dumps(response_dict['results']), content_type="application/json") 
    else :
        log.warning('[profil] request DELETE customer address failed. Status code : {}, USER: {}'.format(response.status_code, request.user.username))
        return HttpResponse("", content_type="application/json") 
    return HttpResponse("", content_type="application/json")

I explicitly encode in utf8 in my view, and it did the trick !