KendoUI自动完成功能在Firefox中不起作用

Question

我的KendoUI自动完成功能在Chrome中可用，但不适用于Firefox。

我可以输入城镇名称，例如“watford”并获得显示在chrome中的结果。

使用FireBug，我可以看到我返回有效的JSON结果，但得到'TypeError：e is undefined'错误消息。

http://jsfiddle.net/franH/znkV3/14/

var app = new kendo.mobile.Application(document.body, { 

transition: 'slide' 
}); 

$(document).ready(function() { 
$("#autoComplete").kendoAutoComplete({ 
    minLength: 7, 
    dataTextField: "title", 
    filter: "contains", 
    placeholder: "Select town...", 
    animation: { 
     open: { 
      effects: "fadeIn", 
      duration: 2000, 
      show: true 
     } 
    }, 

    close: function(e) { 
     var str1 = "Dropdown Item Selected:" + " " + e.item; 
     alert(str1); 
    }, 
    dataSource: new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "http://api.geonames.org/wikipediaSearchJSON", 
       data: { 
        q: function() { 
         return $("#autoComplete").data("kendoAutoComplete").value(); 
        }, 
        maxRows: 10, 
        username: "pete" 

       } 
      } 
     }, 
     schema: { 
      data: "geonames" 
     } 
    }), 
    change: function() { 
     this.dataSource.read(); 
    } 
    }) 
}); 

Answer 1

我看到的唯一问题是，有没有这样的事情e.item为close事件。使用value方法获取自动完成的值。

Answer 2

你好，你正在请求json从另一domein是不允许的Same origin policy。但默认Chrome does not care about this，这就是为什么它仍然有效。

由于您无法强制用户更改其浏览器设置，因此我建议您搜索端点或支持该端点的其他服务jsonp。

Answer 3

得到它在Firefox的工作，通过将行

datatype: "jsonp", 

更新的例子小提琴：http://jsfiddle.net/franH/znkV3/15/

var app = new kendo.mobile.Application(document.body, { 
    transition: 'slide' 
}); 

$(document).ready(function() { 
    $("#autoComplete").kendoAutoComplete({ 
    minLength: 7, 
    dataTextField: "title", 
    filter: "contains", 
    placeholder: "Select town...", 
    animation: { 
     open: { 
      effects: "fadeIn", 
      duration: 2000, 
      show: true 
     } 
    }, 

    close: function(e) { 
     var str1 = "Dropdown Item Selected:" + " " + e.item; 
     alert(str1); 
    }, 
    dataSource: new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "http://api.geonames.org/wikipediaSearchJSON", 
       dataType: "jsonp", 
       data: { 
        q: function() { 
         return $("#autoComplete").data("kendoAutoComplete").value(); 
        }, 
        maxRows: 10, 
        username: "pete" 

       } 
      } 
     }, 
     schema: { 
      data: "geonames" 
     } 
    }), 
    change: function() { 
     this.dataSource.read(); 
    } 
    }) 
});