djangoamazon-web-servicescharacter-encodingjquery-ui-autocompleteamazon-cloudsearch

Jquery Autocomplete x Amazon CloudSearch encoding


Im using Amazon CloudSearch as source to a JQuery Autocomplete select. It works very well, but for a reason that I`m not able to identify, when only one result is returned the encoding becomes a mess.

The solution works as follows:

Text input where people type neighborhoods or streets of a given city:

<div id="searchFormContainer">
    <input type="text" value="&nbsp;Digite o bairro ou rua" name="inputSearch" id="inputSearch"/>
</div>

JQuery autocomplete config:

var sourceFunction = function (request, response) {
    var successFunction = function (places) {
        var placesWithLabel = jQuery.map(places, function (place) {
            var label = (place.addressName) ? place.addressName+', ' : '';
            label += place.neighborhoodName;
            var value = label;
            return {label:label, value:value};
        });
        if(placesWithLabel.length==0){
            placesWithLabel.push({label:"Não encontrado", value:""})
        } 
        response(placesWithLabel);
    }


    var ajaxOptions = {appendTo: '#searchFormContainer', 
                       url: '/textSearch', dataType: "json", 
                       data: {strToSearch: request.term, 
                       cityName: self.place.city.name}, 
                       success: successFunction};
    jQuery.ajax(ajaxOptions);
};

var openFunction = function () {
    jQuery(this).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
};

var closeFunction = function () {
    jQuery( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
};

var selectFunction = function (event, data) {
    if(data.item.value==""){
        return;
    }else{
        //redirect to result page
    }
};

**var autocompleteOptions = {appendTo: '#searchFormContainer',
    source: sourceFunction,
    minLength: 1,
    open: openFunction,
    close: closeFunction,
    select: selectFunction};**

**$('#searchFormContainer #inputSearch').autocomplete(autocompleteOptions);**

It works successfully, calling my python view named textSearch, which does:

def textSearch(request):
    results = simplejson.loads(requests.get('http://%s/2011-02-01/search?' % (settings.SEARCH_CLOUD_HOST), params=fieldsParameter).text)['hits']
    return HttpResponse(simplejson.dumps(results), mimetype='application/json')

Taking for example a search for the street named Oscar Freire in neighbourhood Cerqueira César, when I type Oscar Fr in the autocomplete, Amazon CloudSearch returns me two results:

[16/Apr/2013 23:59:47] "GET /textSearch?strToSearch=Oscar+F&cityName=S%C3%A3o+Paulo HTTP/1.1" 200 682
Neighbourhood from Amazon --> Cerqueira César
Returns from Amazon --> {'id_address': u'52267', 'neighborhoodName': u'Cerqueira C\xe9sar', 'addressName': u'Rua Oscar Freire', 'id_neighborhood': u'19694'}

Neighbourhood from Amazon --> Jardim Anália Franco
Returns from Amazon --> {'id_address': u'61073', 'neighborhoodName': u'Jardim An\xe1lia Franco', 'addressName': u'Rua Jos\xe9 Oscar Abreu Sampaio', 'id_neighborhood': u'19881'}

But, typing one more letter with the search keyword Oscar Fre, which returns only one result I`ve:

[16/Apr/2013 23:59:49] "GET /textSearch?strToSearch=Oscar+Fr&cityName=S%C3%A3o+Paulo HTTP/1.1" 200 286
Neighbourhood from Amazon --> Cerqueira CĂŠsar
Returns from Amazon --> {'id_address': u'52267', 'neighborhoodName': u'Cerqueira C\u0102\u0160sar', 'addressName': u'Rua Oscar Freire', 'id_neighborhood': u'19694'}

As we can see in the output, the returned object is the same (id_address is the same for both results). The amazon object (RAW JSON extracted from CloudSearch) for this entry is:

{"rank":"-text_relevance","match-expr":"(label 'Oscar Freire')","hits":{"found":1,"start":0,"hit":[{"id":"52267","data":{"address":["Rua Oscar Freire"],"bairro":["Cerqueira César"],"fieldtype":["address"],"id_address":["52267"],"id_neighborhood":["19694"],"latitude":["-23.568315"],"longitude":["-46.66293"],"text_relevance":["310"]}}]},"info":{"rid":"e2467862eecf73","time-ms":3,"cpu-time-ms":0}}

For me is clear the fact that the response is coming with wrong encoding to my python view.. But I can`t realize where this problem begins. If it is a bad behaviour from JQuery autocomplete or a problem with Amazon response. Any ideas?

Best Regards


Solution

  • I think it's important to isolate the possible causes of the issue. There are too many possible sources of encoding problems here, you should start with removing possible sources of problems.

    If you search for "Oscar Fr" vs. "Oscar F" in a browser (using the CloudSearch search endpoint), does the encoding change at all? If it stays the same, then the problem is not CloudSearch, and you can move up the stack.