title: What do I need to change in this jQuery Autocomplete example to get it to work with my JSON url?
body: <p>I'm looking at <a href="http://jqueryui.com/demos/autocomplete/remote-jsonp.html" rel="nofollow">this jQuery Autocomplete example</a>.</p>
  
  <p>What I can't figure out is how much of this code depends on the structure of the returned JSON data.</p>
  
  <p>For example, there is a line below:</p>
  
  <pre><code>name_startsWith: request.term
  </code></pre>
  
  <p>Is <code>name_startsWith</code> a function defined somewhere else or an implicit function of some kind?</p>
  
  <p>What is <code>reqest.term</code> that it refers to? I can't find the text <code>term</code> referred to anywhere else in the html document.</p>
  
  <p><strong>I want to try substituting my own JSON url into the example to see if it works but I don't know how much of the example needs to change based on the structure of the JSON response data.</strong></p>
  
  <pre><code>    &lt;script&gt; 
      $(function() {
          function log( message ) {
              $( "&lt;div/&gt;" ).text( message ).prependTo( "#log" );
              $( "#log" ).attr( "scrollTop", 0 );
          }
  
          $( "#city" ).autocomplete({
              source: function( request, response ) {
                  $.ajax({
                      url: "http://ws.geonames.org/searchJSON",
                      dataType: "jsonp",
                      data: {
                          featureClass: "P",
                          style: "full",
                          maxRows: 12,
                          name_startsWith: request.term
                      },
                      success: function( data ) {
                          response( $.map( data.geonames, function( item ) {
                              return {
                                  label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                  value: item.name
                              }
                          }));
                      }
                  });
              },
              minLength: 2,
              select: function( event, ui ) {
                  log( ui.item ?
                      "Selected: " + ui.item.label :
                      "Nothing selected, input was " + this.value);
              },
              open: function() {
                  $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
              },
              close: function() {
                  $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
              }
          });
      });
      &lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;div class="demo"&gt; 
  
  &lt;div class="ui-widget"&gt; 
      &lt;label for="city"&gt;Your city: &lt;/label&gt; 
      &lt;input id="city" /&gt; 
      Powered by &lt;a href="http://geonames.org"&gt;geonames.org&lt;/a&gt; 
  &lt;/div&gt; 
  
  &lt;div class="ui-widget" style="margin-top:2em; font-family:Arial"&gt; 
      Result:
      &lt;div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"&gt;&lt;/div&gt; 
  &lt;/div&gt; 
  
  &lt;/div&gt;&lt;!-- End demo --&gt; 
  </code></pre>