Jquery Autocomplete - объединить источники данных - основной и резервный - PullRequest
2 голосов
/ 19 июля 2011

Я искал форумы, но не нашел ответов на этот вопрос.

Я использую автозаполнение 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" );
        }
    });
});

1 Ответ

1 голос
/ 20 июля 2011

Я думаю, вы могли бы объединить два набора данных, в частности объединить результаты вызова 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/ (напишите lo на входе jsonP, и вы увидите первый результат, полученный Лондоном из статического массива)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...