Adding Event Click on a Twitter Typeahead Result

Question

I have the following js code that prepares a search field using the Twitter Typeahead:

var users = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('cname'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'application/controller/TypeaheadSeed.php?QUERY=%QUERY'
});
users.initialize();

$('#input-friend-list-publication').typeahead({
    hint: true,
    highlight: true
}, {
    name: 'users',
    displayKey: 'cname',
    source: users.ttAdapter(),
    templates: {
        header: '<div class="tt-header">Meus amigos</div>',
        empty: [
            '<div class="empty-message">',
            '   Não foi possível encontrar resultados para essa pesquisa.',
            '</div>'
        ].join('\n'),
        suggestion: Handlebars.compile(
            '<div class="result-values" style="display: inline-block; vertical-align: top;" data-value="{{username}}">' +
            '    <img class="img-rounded" src="{{profilepicpath}}" alt="{{cname}}" title="{{cname}}" width="48" height="48" />' +
            '</div>' +
            '<div style="display: inline-block; vertical-align: top; margin-left: 10px">' +
            '    <div>{{cname}}</div>' +
            '</div>')
    }
});

How I get the value of the attribute data-value? I even tried a solution using the function bind() but unsuccessfully, see it below.

$('#input-friend-list-publication').bind('typeahead:selected', function () {
    console.log($(this));
});

_{Note: my problem is not taking a value from an attribute data-in itself.}

Answer 1

The event typeahead:selected does not exist, the correct would be typeahead:select, to take the value of the array, use the second argument (value that is displayed in the input):

$('#input-friend-list-publication').bind('typeahead:select', function (targetEvent, value) {
    console.log(value);
});

To get the attribute data-value (i’m not sure if it’s the same input value), use .parent() jQuery and with selector .result-values which is equivalent to your template:

 <div class="result-values" ...

It should look something like

$('#input-friend-list-publication').bind('typeahead:select', function (targetEvent, value) {
    var target = $(this).parent();
    console.log($(".result-values", target).attr("data-value"));
});

Or using the .data:

$('#input-friend-list-publication').bind('typeahead:select', function (targetEvent, value) {
    var target = $(this).parent();
    console.log($(".result-values", target).data("value"));
});

Events currently supported by typeahead sane typeahead:active, typeahead:idle, typeahead:open, typeahead:close, typeahead:change, typeahead:render, typeahead:select, typeahead:autocomplete, typeahead:cursorchange, typeahead:asyncrequest, typeahead:asynccancel and typeahead:asyncreceive.

_{Documentation: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-Events}