Question

有没有人有一些关于如何使用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示例，但因为它不使用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");
                });
            }
        });
    });

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

1 个答案: