jquery Autocomplete working with older versions of the browsers but not new ones?

Question

here is the JSON data for my auto complete

{ "list" : [ {
    "genericIndicatorId" : 100,
    "isActive" : false,
    "maxValue" : null,
    "minValue" : null,
    "modificationDate" : 1283904000000,
    "monotone" : 1,
    "name":"Abbau",
    "old_name" : "abbau_change_delete_imac",
    "position" : 2,
    "systemGraphics" : "000000",
    "unitId" : 1,
    "valueType" : 1,
    "description" : "Abbau",
    "weight" : 1
}]}

and the code which i wrote is

$("#<portlet:namespace />giName").autocomplete({
            source :`enter code here` function( request, response ) {
                $.post(
                    "<%=AJAXgetGIs%>",
                    {
                        "<%=Constants.INDICATOR_NAME%>" : request.term,
                        "<%=Constants.SERVICE_ID%>" : <%=serviceId%>
                    },
                    function( data ) {
                        response( $.map( data.list, function( item ) {
                                //alert(item.name + " || " + item.genericIndicatorId);
                                item.value = item.name;
                            return item;
                        }));
                    },
                    "json"
                );
            },
            minLength : 2

i am using jquery-ui-1.8.14.autocomplete.min.js plugin for auto complete the problem i am getting is it is not showing all the matched results in new browsers. for example if i type "an" in which should matches to the "anzahl" keyword, the fire bug is showing error like "bad control character literal in a string". results are showing for the letters "as,sa....". any help would be appriciated thank you

Answer 1

The error message means you have control characters in your JSON response (something like \n, \t, etc). Newlines and the other control characters are not allowed in JSON strings, according to ECMA262 5ed. You can fix it rather easily by escaping or removing those characters, either from PHP or from Javascript.

Here you can find an example of how you can fix it from PHP, as the problem most likely comes from json_encode (which I assume you're using): http://codepad.org/Qu7uPt0E As you can see, json_encode doesn't escape the \n so you have to do it manually before outputting.

Now for the mistery related to older browsers. If you look at jQuery's parseJSON function you'll notice that it first tries to parse the string with the browser's builtin JSON object and if it doesn't find any, it will just do a (sort of) eval (which will work even with newlines). So it probably works for you on Firefox < 3.5 or IE < 8 which don't have a native JSON object. Also, it probably works with other search terms (like as, etc) simply because they don't include a result which has control characters.