Jquery мобильных автозаполнение и географические названия

Question

Я пытаюсь использовать automplete поля, чтобы найти места, и я вижу пример JQuery Mobile, показанный здесь, основанный на базе Geobytes: 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"); 
     }); 
    } 
}); 
}); 

Но я бы использовать сервис Geonames, поскольку он содержит самую большую БД. Вот пример с JqueryUI автозаполнения?! 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"); 
    } 
}); 
}); 

Я пытаюсь объединить 2 примера, но без успеха ... :(Могу ли я получить справку Спасибо заранее

Answer 1

Решенные ! :) Это полный рабочий код:

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

Надеюсь, это поможет! ;)