jquery - 使用 jQuery mobile 列出 Geonames WS 结果（自动完成）

Question

有没有人有一些关于如何使用带有 jQ​​uery 移动的 JSONP 调用 Geonames WS 的自动完成功能的示例或教程？

目标应该类似于http://jqueryui.com/demos/autocomplete/#remote-jsonp但是，而不是下拉菜单，我想要一个格式化列表（可点击）。

我发现该示例http://www.raymondcamden.com/index.cfm/2012/3/27/Example-of-Autocomplete-in-jQuery-Mobile但由于它不使用 Geonames，因此对我。

Answer 1

这是我使用的代码......您只需使用自己的代码添加 href 标记：

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