Skip to content Skip to sidebar Skip to footer

Jquery Autocomplete - Combine Data Sources - Primary And Fallback

I searched the forums but didn't find any answers to this question. I am using jquery autocomplete to populate form fields. I am currently using local data from an XML file (code p

Solution 1:

I think you could merge the two dataset, in particular merge the results from the json call with the data taken from the excel. This is how i'd do it (i didn't use data from an excel but static data, but it should be the same);

 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" );
        }
    });

The merged data is in the both variable, you could even sort it for a better result. Fiddle here: http://jsfiddle.net/7cLxD/7/ (write lo in the jsonP input and you'll se as the first result London taken from the static array)


Post a Comment for "Jquery Autocomplete - Combine Data Sources - Primary And Fallback"