Cannot set property 'url' of undefined

Question

In the example below i create an instance of the typeahead class

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

Later on, and by using the id variable which is obtained via the following method

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

i get the Cannot set property 'url' of undefined since the ta.source.ajax is actually null. How can i fix that?

Simply put, i do not want to create duplicate code for each input of my form

Answer 1

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;