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

【问题标题】：list Geonames WS results with jQuery mobile (autocomplete)使用 jQuery mobile 列出 Geonames WS 结果（自动完成）
【发布时间】：2012-07-29 18:01:50
【问题描述】：

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

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

我发现了这个例子http://www.raymondcamden.com/index.cfm/2012/3/27/Example-of-Autocomplete-in-jQuery-Mobile，但由于它不使用地名，它对我来说不是那么有用。

【问题讨论】：

标签： jquery json jquery-mobile jsonp geonames

【解决方案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");
                });
            }
        });
    });

【讨论】：