Bootstrap Typeahead render issue

Question

I am using bootstrap 3 with typeahead and I am having an issue getting it to format correctly.

My Jquery :

$('input.query').typeahead({
    name: 'query',
    value: 'ntid',
    remote : 'jsonUser.php?query=%QUERY',
    minLength: 3,
    template: '<p><strong>{{ntid}}</strong> – {{name}}</p>',
    engine: Hogan,
    limit: 10  
});   

When I enter 3 characters this is the JSON response.

[
{
    "name": "John Doe",
    "qid": "Q1234",
    "empID": "123",
    "ntid": "test"
},
{
    "name": "Bob Jones",
    "qid": "Q5678",
    "empID": "456",
    "ntid": "testing"
},
{
    "name": "Mike James",
    "qid": "Q2233",
    "empID": "789",
    "ntid": "tester"
},
{
    "name": "Harry Potter",
    "qid": "Q2212",
    "empID": "223",
    "ntid": "testit"
}
]

However, this is the result on the dropdown.

As you can see it only shows 1 result even though there are 4 in the response.

As a side note, when I click on that only response, the drop down list just disappears, doesn't get entered into the text field.

Am I missing something?

Answer 1

I figured it out, I had to add :

    valueKey: 'ntid' as an option.

Complete:

    $('input.query').typeahead({
    name: 'query',
    value: 'ntid',
    remote : 'jsonUser.php?query=%QUERY',
    minLength: 3,
    template: '<p><strong>{{ntid}}</strong> – {{name}}</p>',
    engine: Hogan,
    limit: 10  ,
    valueKey: 'ntid'
}); 

The valueKey setting is the json tag that I am searching in.