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!
Add a comment
|
6 Answers
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
Comments
This is a JSON Format
{source: ["Milan", "Turin", "Venice", "Florence", "Rome"] }
or another source
{source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]}
3 Comments
James
[{"label":"mylabel","value":"myvalue"},...] I found it to be this format that .autocomplete is looking for for jquery UI 1.8
jgauffin
@James: Add it as a separate answer.
Stelios Voskos
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
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;
Comments
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/
1 Comment
DavideDM
This is json but it's not valid for autocomplete
Did you look at the examples here? http://jqueryui.com/demos/autocomplete/#remote
Comments
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.
Comments
