16

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!

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Tony the Pony
  • 40,327
  • 71
  • 187
  • 281

6 Answers6

14

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

James
  • 1,841
  • 1
  • 18
  • 23
5

This is a JSON Format

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

or another source

{source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]}
DavideDM
  • 1,475
  • 16
  • 18
  • 3
    [{"label":"mylabel","value":"myvalue"},...] I found it to be this format that .autocomplete is looking for for jquery UI 1.8 – James May 25 '11 at 02:06
  • @James: Add it as a separate answer. – jgauffin Jan 10 '12 at 14:17
  • Quite late reply to @James, but if those data are into a variable, then the datasource becomes variable_name.source. The "source" is just a property on your JSON object – Stelios Voskos Apr 15 '16 at 07:09
2

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;
phonck
  • 21
  • 1
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/

Mickael Lherminez
  • 679
  • 1
  • 10
  • 29
Michel
  • 9,220
  • 13
  • 44
  • 59
1

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

Teddy
  • 18,357
  • 2
  • 30
  • 42
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.

Teddy
  • 18,357
  • 2
  • 30
  • 42