Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First off, the data source you're using <strong>does not support JSONP</strong>. You can't just grab an arbitrary JSON data source and tell jQuery it's JSONP and expect it to work. The server must be configured to take a callback argument that it appends to the response, calling your code when it completes and is injected onto the page.</p> <p>You can get around this by using <a href="http://developer.yahoo.com/yql/" rel="nofollow">YQL</a> or writing your own server-side code that calls the service.</p> <p>Here's an example using YQL:</p> <pre><code>function buildQuery(term) { return "select * from json where url = 'http://airportcode.riobard.com/search?fmt=JSON&amp;q=" + encodeURI(term) + "'"; } function makeRequest(request, response) { $.ajax({ url: 'http://query.yahooapis.com/v1/public/yql', data: { q: buildQuery(request.term), format: "json" }, dataType: "jsonp", success: function(data) { var airports = []; if (data &amp;&amp; data.query &amp;&amp; data.query.results &amp;&amp; data.query.results.json &amp;&amp; data.query.results.json.json) { airports = data.query.results.json.json; } response($.map(airports, function(item) { return { label: item.code + (item.name ? ", " + item.location : "") + ", " + item.location, value: item.code }; })); }, error: function () { response([]); } }); } $(document).ready(function() { $("#airport").autocomplete({ source: makeRequest, minLength: 2 }); });​ </code></pre> <p>So instead of calling the web service directly, we'll ask YQL to make the request and return a result. YQL acts as a wrapper, making an otherwise inaccessible web service accessible via JSONP.</p> <p>In the <code>success</code> method, we have to go through several properties to finally access the data. After we do that, we can format the results in a way that the autocomplete widget expects (with <code>$.map</code>).</p> <p><strong>Example:</strong> <a href="http://jsfiddle.net/BQxw4/40/" rel="nofollow">http://jsfiddle.net/BQxw4/40/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload