Question

我的KendoUI自动填充示例适用于Chrome，但不适用于Firefox。

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

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

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

您好，请求来自Same origin policy不允许的其他地方的 json 。但默认情况下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();
    }
  })
});

KendoUI自动完成功能无法在Firefox中运行

3 个答案: