Jquery自动完成 – 结合数据源 – 主要和后备

我搜索了论坛，但没有找到这个问题的任何答案。

我正在使用jquery自动填充来填充表单字段。

我目前正在使用XML文件中的本地数据（下面的代码部分一）。 这对于本地查询所需的答案非常有用，但如果本地XML不包含正确的查询结果，我希望有一个备用数据源（JSON geoname – 请参阅下面的代码第2部分）。

我试过并且未能合并这两个数据源，所以为了简单起见，我在这里单独发布它们。

它们都独立工作 – 但如何将它们合并到一个结果字段中？ 此外，XML数据应该是主要选择。

代码第一部分

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文件片段

….

代码第一部分搜索表单片段

 From 

代码第二部分以下是使用地理名称中的JSON自动完成的代码

 $(function() { function log( message ) { $( "
" ).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 ) { $( "
" ).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输入中写一下你将作为伦敦从静态数组中取出的第一个结果）