Json Jquery移动自动完成和地理名称

我试图使用一个自动完成字段来查找位置，我看到了基于Geobytes数据库的Jquery Mobile示例：

$（document）.on（“pageinit”，“myPage”，function（）{
$（“#自动完成”）。关于（“listviewbeforefilter”，函数（e，数据）{
var$ul=$（此），
$input=$（data.input），
value=$input.val（），
html=“”；
$ul.html（“”）；
如果（value&&value.length>2）{
$ul.html（“
”）；
$ul.列表视图（“刷新”）；
$.ajax({
url:“http://gd.geobytes.com/AutoCompleteCity",
数据类型：“jsonp”，
跨域：是的，
数据：{
q:$input.val（）
}
})
.然后（功能（响应）{
$。每个（响应、功能（i、val）{
html+=“
”+val+“
”；
});
$ul.html（html）；
$ul.列表视图（“刷新”）；
$ul.trigger（“updatelayout”）；
});
}
});
});

但是我想使用Geonames服务，因为它包含一个最大的数据库。以下是JqueryUI autocomplete的一个示例：

$（函数（）{
功能日志（消息）{
$（“”）.text（message）.prependTo（“#log”）；
$（“#log”）.scrollTop（0）；
}
$（“#城市”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
url:“http://ws.geonames.org/searchJSON",
数据类型：“jsonp”，
数据：{
特色类：“P”，
样式：“完整”，
马克斯罗：12，
name_startsWith:request.term
},
成功：功能（数据）{
响应（$.map（data.geonames，函数（项））{
返回{
标签：item.name+（item.adminName1？，“+item.adminName1:”）+，“+item.countryName，
值：item.name
}
}));
}
});
},
最小长度：2，
选择：功能（事件、用户界面）{
日志（ui.item？
“选定：”+ui.item.label：
“未选择任何内容，输入为”+此值）；
},
打开：函数（）{
$（this）.removeClass（“ui角点全部”）.addClass（“ui角点顶部”）；
},
关闭：函数（）{
$（this.removeClass（“ui角顶部”）.addClass（“ui角全部”）；
}
});
});

我试图结合这两个例子，但没有成功…：）我能帮忙吗？ 提前感谢！

已解决！：）这是完整的工作代码：

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

$（document）.on（“pageinit”，“myPage”，function（）{
$（“#自动完成”）。关于（“listviewbeforefilter”，函数（e，数据）{
var$ul=$（此），
$input=$（data.input），
value=$input.val（），
html=“”；
$ul.html（“”）；
如果（value&&value.length>2）{
$ul.html（“
”）；
$ul.列表视图（“刷新”）；
$.ajax({
url:“http://ws.geonames.org/searchJSON",
数据类型：“jsonp”，
跨域：是的，
数据：{
特色类：“P”，
样式：“完整”，
马克斯罗：12，
朗：“它”，
name_startsWith:$input.val（）
}
})
.然后（功能（响应）{
$.each（response.geonames，function（i，val）{
html++=“
”+val.name+（val.adminName1？”，“+val.adminName1:”）+，“+val.countryName+”
”；
});
$ul.html（html）；
$ul.列表视图（“刷新”）；
$ul.trigger（“updatelayout”）；
});
}
});
});

希望能有所帮助！；）

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

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