Twitter Typeahead returning full object on result

Question

I'm having a problem with twitter typeahead along with C# MVC , when it's autocomplete, it prints the entire object to my input:

My code:

var states = [];

@foreach (var item in ViewBag.Clubes)
{
    @:states.push({ "Nome" : "@item.Nome", "Id" : "@item.Id" })
}


$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    valueKey: 'Nome',
    displayKey: 'Nome'
},
{
    name: 'value',
    source: substringMatcher(states),
    templates: {

    empty: [
      '<div class="empty-message">',
        ' Clube não encontrado ',
      '</div>'
    ].join('\n'),
    suggestion: function (data) {
        return "<strong>" + data.Nome + " " + data.Id + "</strong>";
    }

}
});

The values on the drop-down suggestion works fine, but when I select them he fills the input with the array object, anyone knows how can I solve it?

Thanks.

Answer 1

Simply set a value to your typeahead input box as follows

$('.typeahead').typeahead('val',data.Nome);

Here is your final code

var states = [];

@foreach (var item in ViewBag.Clubes)
{
    @:states.push({ "Nome" : "@item.Nome", "Id" : "@item.Id" })
}


$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    valueKey: 'Nome',
    displayKey: 'Nome'
},
{
    name: 'value',
    source: substringMatcher(states),
    templates: {

    empty: [
      '<div class="empty-message">',
        ' Clube não encontrado ',
      '</div>'
    ].join('\n'),
    suggestion: function (data) {
        return "<strong>" + data.Nome + " " + data.Id + "</strong>";
    }

}
}).on('typeahead:selected', function(e, data) {
        $('.typeahead').typeahead('val',data.Nome);
});