JSON format for jQuery UI Autocomplete

Question

The documentation for jQuery UI Autocomplete states that the source property can be set to a URL that returns the suggested items in JSON format. However, it doesn't elaborate further what the structure of this JSON result is supposed to look like. Could anyone post an example? Thanks!

Answer 1

Moved the answer here from my comment:

[{"label":"mylabel","value":"myvalue"},...] 

I found it to be this format that .autocomplete is looking for for jquery UI 1.8

Answer 2

This is a JSON Format

{source: ["Milan", "Turin", "Venice", "Florence", "Rome"] }

or another source

{source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]}

Answer 3

using firebug we can see this format for json

[{"id":"Podiceps nigricollis","label":"Black-necked Grebe","value":"Black-necked Grebe"}]

I used json_encode

$a[$x] = array("id" => $row["id"],"label"=>$row["label"],"value"=>$row["value"]);
}
//echo JSON to page
    $response =  json_encode($a);
echo $response;

Answer 4

I do a call to a Java Spring controller that simply returns the information below (in JSOn format). I build it with JSTL. But I don't know what kind of backend you use. But in Allmost every language you can simple output some JSON.

Example:

{
  "results": [{
      "id": " Canned",
      "name": " Canned"
    }, {
      "id": 64,
      "name": "Added Sulphites"
    },
    {
      "id": 3,
      "name": "age"
    }, {
      "id": "age",
      "name": "age"
    }, {
      "id": 59,
      "name": "age group"
    },
    {
      "id": "Allergen",
      "name": "Allergen"
    }, {
      "id": 85,
      "name": "Anchovies"
    }
  ]
}

I dislike autocomplete. maybe you found a better solution in flexbox: http://flexbox.codeplex.com/

Answer 5

Did you look at the examples here? http://jqueryui.com/demos/autocomplete/#remote

Answer 6

Here is a real-world example, but it uses a JSONP remote datasource: http://www.highpoint.edu/admissions/contact.cfm

The High School field uses autocomplete (make sure you Choose 'Freshman' for type of admission b/c otherwise the high school field will be hidden). Also, changing country/state selection will alter the autocomplete source somewhat, which might add some confusion.

Also, that URL is just a wrapper for an iframe with the real form, which I cannot post a link to b/c new users can only post one URL in a comment.