jQuery-UI Autocomplete Using URL Source Works With Array of Strings But Not Array of Objects

Question

Using jQuery 1.7.2 and jQuery UI 1.8.18. If I use local data for the source attribute, everything works as expected. According to the documentation, a source array can be an array of string values or an array of objects:

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

Additionally, the source attribute can be a URL that responds with JSON data formatted as shown above:

String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.

If my JSON responder returns a simple array of strings, autocomplete works exactly as it should. If, however, my JSON responder returns an array of objects formatted as above, the request is made to the URL but the dropdown list is never populated. The JavaScript console shows no errors.

The autocomplete invocation looks like this:

var source_url = '/json/codes.php?type=globalcode&cid=25';
$('.gcode').autocomplete({
        minLength: 2,
        source: source_url
});

The responder is written in PHP. It is just a stub until I get this problem solved:

header('Content-Type: application/json, charset=UTF-8');
...
if( !$_REQUEST['type'] || !$_REQUEST['cid'] ){
        echo('[]');
        return false;
}
if( $_REQUEST['type'] == 'globalcode' ){
        $cid = sprintf("%d", $_REQUEST['cid']);
        $stub = "[ { label: 'Label for 1234', value: '1234' }, { label: 'Label for 5678', value: '5678' } ]";

        echo( $stub );
        return false;
}

Again, it works with both kinds of arrays when the data is local and it works with an array of string values when the data is remote. When the data is a remote array of objects, the list is never populated and JavaScript throws no errors.

I should add that the response that comes back looks like this: [ { label: 'Label for 1234', value: '1234' }, { label: 'Label for 5678', value: '5678' } ] — matthewsewell, Nov 09 '12 at 23:33

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

You have invalid JSON, this is never logged in the console. JSON cannot have single quotes, use double quotes, also use JSONLint to check your JSON.

This is the valid version of your JSON:

[
  {
    "label": "Labelfor1234",
    "value": "1234"
  },
  {
    "label": "Labelfor5678",
    "value": "5678"
  }
]

edited May 23 '17 at 12:23

Community

1
1

answered Nov 09 '12 at 23:36

PieSub

318
1
8

This solved it. I had originally used double quotes exactly as in the example in the documentation but, like the documentation, I didn't quote the label and value keys. I suppose everything would have ended up working once I used json_encode() on the real data rather than using the hand-written stub. Either way, good suggestion on the JSONint link. I was not familiar with it. – matthewsewell Nov 09 '12 at 23:48

score 0 · Answer 2 · answered Nov 07 '15 at 13:54

0

You could use json_encode() instead

$stub = array(
 array(
    "label"=>"Labelfor1234",
    "value"=>"1234"
 ),
 array(
    "label"=>"Labelfor5678",
    "value"=>"5678"
 )
);
echo json_encode($stub);

answered Nov 07 '15 at 13:54

kbokdia

439
5
11

jQuery-UI Autocomplete Using URL Source Works With Array of Strings But Not Array of Objects

2 Answers2