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

Bartlet

If it is working fine for other combinations 'as' and 'sa', I'd suggest looking carefully at the differences in your JSON response in comparison to 'an'. You can view the response in Chrome by pressing Ctrl + Shift + I and choosing the 'Network' tab. Then as your code runs the script, you can see the response. – Tweed

@Tweed Coulton it is giving response no:200 like for others as well but not showing the results in the drop down list. – Bartlet

Check the actual 'json' that is returned for each response. There is a 'json' tab within the Network area of the Chrome Developer tools. – Tweed

The autocomplete widget with the data you've posted. Perhaps it has something to do with the data that comes back when you type specific characters (like "as" and "sa"). – Talbott

In which browsers it works and works not for you ? – Mccurry

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.

Stradivarius

Answer 2

Adding to draevors correct answer.

Look at downloading the JSON2 library https://github.com/douglascrockford/JSON-js That is how i got around this problem

Foushee