jQuery UI自动完成功能无法在IE JSON中运行

时间:2012-11-19 15:25:55

标签: jquery-ui jsonp jquery-ui-autocomplete

这是一个让我们有点疯狂的人。我们从jQuery UI页面http://jqueryui.com/autocomplete/#remote-jsonp实现了JSONP的示例脚本,然后就在它旁边,我们编写了一个最小修改版本。

这是踢球者。来自jQuery ui的脚本在IE中工作,我们的脚本仅适用于Firefox,Chrome等

唯一的区别是我们的数据源。

当我们将数据发送到客户端时,我们需要做些什么神奇的事情?我们已经尝试将它包装在命名函数等中。

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title></title>
    <link rel="stylesheet" href="/css/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>

<body>
    <script>
        function foo (str) {
            //console.log(str);
            return str;
        }
        $(function() {
            function log( message ) {
                $( "#street1" ).val( message );
            }
            $( "#street1" ).autocomplete({
                source: function( request, response ) {
                $.ajax({
                    url: "http://192.168.50.78/melissa/address/linux/interfaces/php/api/autoAddrSuggest_new_dual2.php",
                    dataType: "json",
                    data: {
                        format: 'json',
                        action: 'address1request',
                        zipcode: '43026',
                        address: request.term
                    },
                    success: function( data ) {                        
                        console.log( data.addresses );
                        response( $.map( data.addresses, function( item ) {
                            return {                                
                                label: item.address,
                                value: item.address
                            };
                        }));                    
                    },
                    error: function(data) {
                        console.log(data);
                    }   
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value :
                    "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" );
            }
        });

        $( "#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 ) { 
                        console.log( data.geonames );                       
                        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" );            
            }        
    });
    });         


</script>
<div id="wrap">
    <div id="main">
        <div>
            <form id="enroll" name="enroll" method="post" enctype="multipart/form-data">

            <div>

                <p class="left">
                    <span>&nbsp;</span><br/>
                    <input id="street1" />
                    <input id="city" />
                </p>
            </div>

            </form>
        </div>
     </div>
  </div>

</body>
</html>

对于咯咯笑,这是工作json服务的输出

{"totalResultsCount":12958,"geonames":[{"countryName":"Russia","adminCode1":"33","fclName":"city, village,...","countryCode":"RU","lng":51.4913,"fcodeName":"seat of a second-order administrative division","toponymName":"Uni","fcl":"P","name":"Uni","fcode":"PPLA2","geonameId":478996,"lat":57.751,"adminName1":"Kirov","population":4767},{"countryName":"Russia","adminCode1":"54","fclName":"city, village,...","countryCode":"RU","lng":72.622724,"fcodeName":"populated place","toponymName":"Uki","fcl":"P","name":"Uni","fcode":"PPL","geonameId":1488608,"lat":56.991135,"adminName1":"Omsk","population":0},{"countryName":"Philippines","adminCode1":"07","fclName":"city, village,...","countryCode":"PH","lng":124.3252,"fcodeName":"populated place","toponymName":"Union","fcl":"P","name":"Union","fcode":"PPL","geonameId":1680262,"lat":10.6695,"adminName1":"Central Visayas","population":4581},{"countryName":"Philippines","adminCode1":"13","fclName":"city, village,...","countryCode":"PH","lng":126.1102778,"fcodeName":"populated place","toponymName":"Union","fcl":"P","name":"Union","fcode":"PPL","geonameId":1680267,"lat":9.7566667,"adminName1":"Caraga","population":2368}]}

这是我们服务器的输出

{"addresses":[{"address":"3666 LACEY WOODS PARK"},{"address":"3666 LACON RD"},{"address":"3666 LAKESTONE CIR"},{"address":"3666 E LINKS CIR"}]}

1 个答案:

答案 0 :(得分:0)

除非您打开开发人员工具或实施变通方法,否则

console.log在IE中不起作用:

What happened to console.log in IE8?

取出或注释掉所有console.log个引用或点击F12或使用解决方法并在IE中再试一次。

IE中的F12将显示任何js错误,并且对于解决此类问题非常有用,即使它不是导致问题的console.log语句。