Question

I’m trying to duplicate this, http://jqueryui.com/demos/autocomplete/#remote-jsonp. Only, instead of querying the geonames.org server I’d like to query my own. Trouble is that tutorial doesn’t mention anything about what geonames is doing on their end.

I tried to wing it and grab $_POST variables but I guess I don’t understand what the ajax is passing. $_POST[‘name_startsWith’] doesn’t exist which is what seems to be being passed. Can anyone enlighten me as to what the sent information looks like?

Also, the tutorial is regarding jsonp, not json. How important is that?

Answer 1

JSONP and quite different to JSON. As others say JSONP is cross server for one.

JSON is a better method for getting data form your own server and is much easier to translate and get working across all browsers.

What is returned is a item array under the relative format of:

[{label: '', description: ''}, { //etc }]

The label is used as the display name and unless you bring extra data back like an ID it will be the only data used to select items in the auto complete.

Using functions such as select you can take the ui.item.id (the id would be coming back with your array as defined above) and use that to select unique items from a list with which to perform further AJAX functions on.

Edit:

To use pass-backed vars to change the display of the menu you will need to write your own displayMenuItem function to utilise the vars from the array defined above.

Fruther edit:

The way they actually do this is two sided. The remote server just passes back an echo’ed JSON format array, like the one defined above and nothing else (well except for headers). After that JQuery just sorts thje array out and fills the data in.

So an example in PHP of doing this:

echo json_encode(array('name' => 'whoop'));

And literally that’s it on the remote server side…

Edit again I forgot the callback sent wit JSONP