无法设置未定义的属性“url”

Question

在下面的示例中，我创建了一个 typeahead 类的实例

    var ta = $.typeahead({
        input: '.super',
        minLength: 0,
        maxItem: 15,
        order: "asc",
        hint: true,
        href: "",
        searchOnFocus: true,
        display: ["name"],
        template: "{{name}}",
        source: {
            "SearchResults": {
                //ajax: {
                //    url: "/search/" + id,
                //    path: ""
                //}
            }
        },
        callback: {
            onClickAfter: function (node, a, item, event) {
                event.preventDefault;
                debugger;
            }
        },
        debug: true
    });

稍后，通过使用通过以下方法获得的id变量

    $("input").focus(function () { 
        id = $(this).attr("id");
        ta.source.ajax.url = "/search/" + id;
    }); 

我得到了Cannot set property 'url' of undefined，因为ta.source.ajax 实际上是空的。 我该如何解决？

简单地说，我不想为表单的每个输入创建重复的代码

Answer 1

通过options property 配置Typeahead 实例的SearchResults 组。

Typeahead 实例的source 属性是从options 生成的。

ta.options.source.SearchResults.ajax.url = "/search/" + id;

Answer 2

我认为你应该使用ta.source.SearchResults.ajax.url 而不是@freedomn 建议的ta.source.ajax.url

$("input").focus(function () { 
    id = $(this).attr("id");
    ta.source.SearchResults.ajax.url = "/search/" + id;
}); 

另外，@OrElse 关于您的错误，请尝试将属性留空并且不要将它们注释掉。另外尝试从 SearchResults 中删除双引号 --

source: {
    SearchResults: {
        ajax: {
            url: "/search/" + id,
            path: ""
        }
    }
},

Answer 3

也许您正在使用某种 jQuery 库。但如果它正确加载和初始化您的变量。你得到所有其他财产那么这是一个小问题。让我们讨论一个可能的案例并理解问题

    var ta = $.typeahead({
            input: '.super',
            minLength: 0,
            maxItem: 15,
            order: "asc",
            hint: true,
            href: "",
            searchOnFocus: true,
            display: ["name"],
            template: "{{name}}",
            source: {
                "SearchResults": {
                    //ajax: {
                    //    url: "/search/" + id,
                    //    path: ""
                    //}
                }
            },
            callback: {
                onClickAfter: function (node, a, item, event) {
                    event.preventDefault;
                    debugger;
                }
            },
            debug: true
        });

当您将任何内容分配给“ta”变量时，您可能会获得所有属性。但您收到“无法设置未定义的属性‘URL’”的错误。因此，明确提到您尝试使用的属性是 URL。从逻辑上讲，它应该是 ajax 属性，但 ajax 本身并未在您的变量中定义。所以你应该先定义ajax。

var ta = $.typeahead({
            input: '.super',
            minLength: 0,
            maxItem: 15,
            order: "asc",
            hint: true,
            href: "",
            searchOnFocus: true,
            display: ["name"],
            template: "{{name}}",
            source: {
                "SearchResults": {
                    ajax: { // now ajax is defined and you will not get any error. 
                    }
                }
            },
            callback: {
                onClickAfter: function (node, a, item, event) {
                    event.preventDefault;
                    debugger;
                }
            },
            debug: true
        });

始终确保 JSON 的变量已在之前定义，您可以稍后再定义属性。

例如

var a={}
a.b.c=10
console.log(a.b.c)// you will get same error.

但如果你使用类似下面的东西。

a.b={}
a.b.c=10 
console.log(a.b.c)// you will not get an error.

希望这会对你有所帮助。

Answer 4

如果只在 if 语句中换行，检查 ta.source.ajax 是否存在，以防止它抛出 null 错误的属性

if(ta.source.ajax){
   ta.source.ajax.url = "/search/" + id;
}