CODEWITHSUNDEEP
phpajaxjsonjquery-uijquery-ui-autocomplete
davimusprime
davimusprime

Reputation: 119

jquery autocomplete with json and php

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?

Upvotes: 1

Views: 1187

Answers (6)

Salman Arshad
Salman Arshad

Reputation: 272066

Few basics rules to get you started with writing your own JSON service:

  • If you want other websites to be able to consume your data then you need to implement JSONP; both JSONP/JSON can be used otherwise. JSONP mechanism circumvents issues with same origin policy.

  • If you want other websites to be able to consume your data then your script should accept parameters through query strings; both query-string and form variables can be used otherwise.

  • For JSON requests, your server needs to emit JSON-encoded data. The data must be sent with the content type application/json. Example PHP code:

header("Content-type: application/json");
echo json_encode(array("foo" => "bar"));
// {"foo":"bar"}
  • For JSONP requests, your server needs to emit JSON data wrapped inside a JavaScript function call and the content type text/javascript. Example PHP code:
header("Content-type: text/javascript");
echo "callback(";
echo json_encode(array("foo" => "bar"));
echo ");";
// callback({"foo":"bar"});

  • You normally grab the callback function's name from GET/POST variable instead of hardcoding.

  • In practice, JSONP requests are generated using <script src> tags; whereas JSON requests are made using XML HTTP Requests.

Upvotes: 1

Sammaye
Sammaye

Reputation: 43884

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

Upvotes: 2

jgivoni
jgivoni

Reputation: 1645

this is probably the documentation from geonames you are looking for: http://www.geonames.org/export/geonames-search.html

If you try one of the example links you should see a list of geonames elements. Each one contains, among other things, the properties: name, adminName1 and countryName, which is what is displayed in this example.

jsonp is important if you are requesting data from another host than the one your page is served from. If you intend to call your own service, you can use simple json

Upvotes: 1

zachzurn
zachzurn

Reputation: 2201

JSON vs JSONP

The difference between JSON and JSONP is how the JSON is returned from the server. With regular JSON, the server returns plain JSON in its standard response format. With JSONP the server returns a javascript document that contains a function call with the JSON data passed to the function name that you send to the server.

Sample JSON returned from server

JSON: {name:data}

JSONP: functionName({name:data});

When to use JSONP vs JSON

Making a query from www.name.com to www.other.com use JSONP.

Making a query from www.name.com to www.name.com use regular JSON.

Autocomplete Plugin

With regard your other question, the variables sent by the autocomplete plugin are sent as GET variables, so use: $_GET['name_startsWith'] or $_REQUEST['name_startsWith']. (REQUEST would check for both GET and POST).

Upvotes: 1

edwardmp
edwardmp

Reputation: 6591

Use Firefox and a plugin called Firebug. Use the 'net' view panel.

I see the following data being passed:

_            1340311947284
callback    jQuery17206118978844942496_1340311935530
featureClass    P
maxRows 12
name_startsWith atlanta
style   full

The URL requested is this one. There you can see how the JSON is formed.

Upvotes: 1

uadnal
uadnal

Reputation: 11425

jsonp is only for request to outside servers (cross origin). Returned is a JSON object from that call.

If you are making requests to your own server, just use a normal request with Content-Type: application/json. Check out the demo remote datasource and remote with caching. Those are probably more up your ally.

Upvotes: 2

Related Questions