使用 JSONP 的 Jquery 移动自动完成

Posted

技术标签:

【中文标题】使用 JSONP 的 Jquery 移动自动完成【英文标题】:Jquery Mobile Autocomplete using JSONP 【发布时间】:2012-04-26 08:25:09 【问题描述】:

谁有一个使用 jquery 移动自动完成的远程 JSONP 调用(例如 ws.geonames.com)的工作示例?

我已经找到并且可以使用其他组合(没有 jqm 的 jsonp 远程、jqm 本地自动完成等),但是带有 jsonp 远程调用的 jqm 自动完成正在破坏请求(编码函数代码并将其发送到本地主机)

【问题讨论】:

【参考方案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://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");
                    );
                
            );
        );

【讨论】:

以上是关于使用 JSONP 的 Jquery 移动自动完成的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI 自动完成鼠标点击选择不传递值

如何在jquery移动自动完成中获取所选列表数据的ID

使用jQuery中trigger()方法自动触发事件

自定义 jquery 自动完成结果

jQuery 移动自动完成不会自我更新

SpringMVC JSONP JSON支持