JQuery for Mobile Autofill and Geonames

Question

I am trying to use the automplete field to find locations, and I see a jQuery Mobile example shown here based on the 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 like to use the Geonames service, because it contains the largest database. Here is a jqueryui autocompletion example: 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 am trying to combine two examples, but to no avail ... :( Can I get help? Thanks in advance!

Answer 1

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 this helps !;)