title: Jquery Autocomplete - combine data sources - primary and fallback
body: <p>I searched the forums but didn't find any answers to this question.</p>
  
  <p>I am using jquery autocomplete to populate form fields.</p>
  
  <p>I am currently using local data from an XML file (code part one below).
  This works great for the answers I need for local queries, but I would like to have a fallback data source (JSON geoname - see code part two below) if the local XML does not contain the right query result.</p>
  
  <p>I tried and failed to merge the two data sources, so for the sake of simplicity, I'm posting them individually here.</p>
  
  <p>They both work independently - but how to merge them into one results field?
  Also, the XML data should be the primary choice.</p>
  
  <p><strong>CODE PART ONE</strong> </p>
  
  <p>Code for the XML local source</p>
  
  <pre><code>$(document).ready(function() {
      var myArr = [];
  
      $.ajax({
          type: "GET",
          url: "airports.xml", 
          dataType: "xml",
          success: parseXml,
          complete: setupAC,
          failure: function(data) {
              alert("XML File could not be found");
              }
      });
  
  
  
  
      function parseXml(xml)
      {
  //find every query value
          $(xml).find("state").each(function()
       {
      //you are going to create an array of objects
      var thisItem = {};
      thisItem['label'] = $(this).attr("label") + ',  ' + $(this).attr("country");
      thisItem['value'] = $(this).attr("iata");
      myArr.push(thisItem);
       });
      } 
  
  
  
      function setupAC() {
          $("#city").autocomplete({
                  source: myArr,
                  minLength: 3,
                  select: function(event, ui) {
                      $("#city").val(ui.item.iata);
                      $("#qf").submit();
                  }
          });
      }
  });
  </code></pre>
  
  <p><strong>code part one airports.xml file snippet</strong>   </p>
  
  <pre><code>&lt;states&gt;
  &lt;state label="London Heathrow" iata="LHR" country="UK" /&gt;
  &lt;state label="Syndey" iata="SYD" country="Australia" /&gt;
  </code></pre>
  
  <p>....</p>
  
  <p><strong>code part one search form snippet</strong></p>
  
  <pre><code>&lt;label for="city"&gt;From&lt;/label&gt;&lt;/td&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CODE PART TWO</strong>
  Here's the code for the autocomplete using JSON from geonames</p>
  
  <pre><code>$(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: 20,
                      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" );
          }
      });
  });
  </code></pre>