Cannot set property 'url' of undefined

Configure SearchResults group through options property of the Typeahead instance.

source property of Typeahead instance is generated from options.

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

I think you should use ta.source.SearchResults.ajax.url instead of ta.source.ajax.url as suggested by @freedomn

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

Also, @OrElse about your error, try leaving the properties empty and not commenting them out. Plus try removing double quotes from SearchResults --

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

Maybe you are using some kind of library of jQuery. but if its loading and initializing your variable properly. and you are getting all other property then it's a small issue. Let's discuss a possible case and understand the problem

    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
        });

when you assigning anything into the "ta" variable probably you are getting all property. but you are getting an error that "Cannot set property 'URL' of undefined". So it's clearly mentioned property which you re trying to use is URL. logically it should be ajax property but ajax itself not defined in your variable. So you should first define 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
        });

Always make sure the variable of JSON is defined previously you can define a property later.

for example

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

but if you use something like below.

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

hope this will help you.

What about just wrapping the line in a if statement checking if ta.source.ajax exists to prevent it from throwing the property of null error

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