twitter Typeahead input goes undefined when selecting

Question

I have a typeahead working fine, but when I select an entry, input is filled with "undefined"

Any idea why ? Is there a "selecting" event or something that I can use to fill the input with the currently selected value ? I didn't found any information about this behavior on the web. Here is the typeahead declaration :

$('.receivers-input').typeahead({
        minLength: 0,
    }, {
        source: function (query, cb) {
            var Request = $.ajax({
                methode: "POST",
                url: "MessagingService.svc/UserAutocomplete",
                dataType: "json",
                contentType: "application/json; charsert=utf-8",
                data: JSON.stringify({ "inputString": query })
            }).done(function (Response) {
                if (!Response.UserAutocompleteResult.success) {
                    if (!Response.UserAutocompleteResult.message)
                        return;
                    ErmesManager.notify(Response.UserAutocompleteResult.message, null);
                    return;
                }
                cb(Response.UserAutocompleteResult.d);
            });
        },
        templates: {
            suggestion: function (suggestion) {
                return '<p>' + suggestion + '</p>';
            }
        }
    }).on('typeahead:selected', function (event, data) {
        $('.receivers-input').val('');
        ComputeToken(data, true);
    }).on('blur', function (event, data) {
        $('.receivers-input').val(data);
    });
}

Answer 1

Adding on('typeahead:cursorchanged', function (event, data) {}); do the trick. Plus since I use a placeholder display is a bit messy. I cleaned it up by adding a visibility: hidden on the tt-hint class.

Here are the full modifications :

CSS :

.tt-hint {
    visibility: hidden;
}

Javascript :

 ...
}).on('typeahead:selected', function (event, data) {
    $('.receivers-input.tt-input').val('');
    ComputeToken(data, true);
}).on('blur', function () {
    $('.receivers-input.tt-input').val('');
}).on('typeahead:cursorchanged', function (event, data) {
    $('.receivers-input.tt-input').val(data);
});

The cursorchanged event was not documented here, if anyone have other sources for documentation I would be glad to have them.

I would add that this question and answer are on a old bootstrap version context. With the latest version (at the moment) typeahead:select would have done the trick too.