`this` bound to window? - Expose Input field to the API.

[awgeorge]

I am really struggling with trying to grab a reference to the input field. Internally there seems to be a this.$input that should relate the the current input field. However, this isn't accessible through the API (to my knowledge) and all references to this return the window object.

The problem I am finding is due to the fact that I'm binding to multiple inputs, this is clearly not the default behaviour that the twitter devs intended, but I believe it makes sense.

var data = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        identify: function(obj) { return obj.objectId; },
        remote: {
            url: '/team/management/suggest',
            prepare: function(query, request){
                               console.log(this);  // Bloodhound object
                var name = $(":focus").attr("name");
                request.url = request.url + '?'+ name +'=' + query;
                return request;
            }
        }
    });

$('[role="typeahead"]').typeahead({
        minLength: 2,
        highlight: true,
        classNames: {
            wrapper: "suggestion-wrapper"
        }
    }, {
        name: 'players',
        display: 'name',
        source: data,
        limit: 100,
        templates: {
            suggestion: function(obj){
                console.log($(this)); // Window object
                var name = $(":focus").attr("name");
                if(name == "form_team_manage_ground"){
                    return '<div class="clearfix"><strong>'+ (obj.name || obj.street) +'</strong> <span class="pull-right">'+ (obj.postcode || "") +'</span></div>';
                }

                return '<div><strong>'+ (obj.name) +'</strong></div>'; 
            },
            notFound: function(obj){
                console.log(this);  // Window object
                var name = $(":focus").attr("name");
                if(name == "form_team_manage_ground"){
                    return '<div class="tt-suggestion tt-selectable" data-action="add_ground"><strong>Add Ground</strong></div>'
                }

                return '<div class="tt-suggestion tt-selectable" data-action="add_player"><strong>Add Player</strong></div>';
            }
        }
    })

This was working well, until the latest release of Safari, it seems that :focus doesn't populate until after the suggestion engine kicks in, this means that I get undefined.

I would like for the input field to be exposed so that we don't need to rely on :focus.

Can somebody point me in the right direction as this library's source seems highly complex?

Cheers.