Я искал форумы, но не нашел ответов на этот вопрос.
Я использую автозаполнение jquery для заполнения полей формы.
В настоящее время я использую локальные данные из файла XML(код первой части ниже).Это прекрасно работает для ответов, которые мне нужны для локальных запросов, но я хотел бы иметь запасной источник данных (JSON Geoname - см. Часть кода ниже), если локальный XML не содержит правильный результат запроса.
Я пытался и не смог объединить два источника данных, поэтому для простоты я публикую их здесь отдельно.
Они оба работают независимо - но как объединить их в одно поле результатов?Кроме того, данные 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();
}
});
}
});
код часть первая airport.xml, фрагмент файла
<states>
<state label="London Heathrow" iata="LHR" country="UK" />
<state label="Syndey" iata="SYD" country="Australia" />
....
код части первой, фрагмент формы поиска
<label for="city">From</label></td>
КОД ЧАСТЬ ВТОРАЯ Вот код для автозаполнения с использованием 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" );
}
});
});