Jquery mobile autocomplete and Geonames

autocomplete, geonames, jquery-mobile, json

Solution

Solved! :) This is the full working code:

        $( document ).on( "pageinit", "#myPage", function() {
        $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
            var $ul = $( this ),
                $input = $( data.input ),
                value = $input.val(),
                html = "";
            $ul.html( "" );
            if ( value && value.length > 2 ) {
                $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
                $ul.listview( "refresh" );
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    crossDomain: true,
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        lang: "it",
                        name_startsWith: $input.val()
                    }
                })
                .then( function ( response ) {
                    $.each( response.geonames, function ( i, val ) {
                        html += "<li>" + val.name + (val.adminName1 ? ", " + val.adminName1 : "") + ", " + val.countryName + "</li>";
                    });
                    $ul.html( html );
                    $ul.listview( "refresh" );
                    $ul.trigger( "updatelayout");
                });
            }
        });
    });

Hope it can helps! ;)

Problem

I'm trying to use an automplete field to find locations, and I see the example for Jquery Mobile shown here based on Geobytes database: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/autocomplete/autocomplete-remote.html ``` $( document ).on( "pageinit", "#myPage", function() { $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) { var $ul = $( this ), $input = $( data.input ), value = $input.val(), html = ""; $ul.html( "" ); if ( value && value.length > 2 ) { $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" ); $ul.listview( "refresh" ); $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", crossDomain: true, data: { q: $input.val() } }) .then( function ( response ) { $.each( response, function ( i, val ) { html += "<li>" + val + "</li>"; }); $ul.html( html ); $ul.listview( "refresh" ); $ul.trigger( "updatelayout"); }); } }); }); ``` But I would to use the Geonames service, beacause it contain a most large DB. Here is an example with JqueryUI autocomplete: http://jqueryui.com/autocomplete/#remote-jsonp ``` $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, 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" ); } }); }); ``` I'm trying to combine the 2 examples but without success... :( Can I have an help? Thanks in advance!

Original source