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

Answer 1

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.

Answer 2

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 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

This is a JSON Format

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

or another source

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

Answer 5

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 6

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