Jquery自動完成 - 結合數據源 - 主要和後備

Question

我搜索了論壇，但沒有找到任何答案這個問題。

我正在使用jquery自動填充來填充表單域。

我目前正在使用來自XML文件的本地數據（代碼第一部分下面）。 這適用於本地查詢所需的答案，但如果本地XML不包含正確的查詢結果，我希望有一個後備數據源（JSON geoname - 請參閱下面的代碼第二部分）。

我試過並且未能合併這兩個數據源，所以爲了簡單起見，我將它們單獨發佈在此處。

他們都獨立工作 - 但如何將它們合併成一個結果字段？ 另外，XML數據應該是主要選擇。

代碼的一部分ONE

代碼爲XML本地源

$(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(); 
       } 
     }); 
    } 
}); 

部分代碼一個airports.xml文件片段

<states> 
<state label="London Heathrow" iata="LHR" country="UK" /> 
<state label="Syndey" iata="SYD" country="Australia" /> 

....

代碼部分一個搜索表單代碼

<label for="city">From</label></td> 

CODE第二部分 下面是使用JSON從GEONAMES

$(function() { 
    function log(message) { 
     $("<div/>").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"); 
     } 
    }); 
}); 

Answer 1

我認爲你可以將二者合併爲自動完成代碼數據集，特別是將json調用的結果與從excel中獲取的數據進行合併。這是我如何做到這一點（我沒有使用Excel中的數據，但靜態數據，但它應該是相同的）;

var availableTags = []; 
    var london = { label: 'London Airport - UK', value: 'LHR'}; 
    var paris= { label: 'Paris Airport - FRA', value: 'PAR'}; 
    availableTags.push(london); 
    availableTags.push(paris);  
    $("#city2").autocomplete({ 
     source: availableTags 
    }); 

    function log(message) { 
     $("<div/>").text(message).prependTo("#log"); 
     $("#log").attr("scrollTop", 0); 
    } 
function filterArrayForString(string, array){ 
    var results = []; 
    $.each(array, function(i, el){ 

     var label= el.label; 

     if (label.toLowerCase().indexOf(string.toLowerCase()) !== -1){ 
      results.push(el); 
     } 
    }); 
      return results; 
} 

    $("#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) { 
        var dataConv = $.map(data.geonames, function(item) { 
         return { 
          label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
          value: item.name 
         } 
        }); 
        var filteredAvailable = filterArrayForString(request.term, availableTags); 
        console.log(request.term); 
        console.log(filteredAvailable); 
        var both = filteredAvailable.concat(dataConv); 

        response(both); 
       } 
      }); 
     }, 
     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"); 
     } 
    }); 

合併的數據是在both變量，你甚至可以分揀出更好的結果。在這裏撥動：http://jsfiddle.net/7cLxD/7/（在jsonP輸入中寫入lo，您將選擇倫敦取自靜態數組的第一個結果）