Typeahead.js does give me suggestions but doesn't select them

Question

I'm using Bootstrap 3.0 and the latest version of Typeahead.js with the Hogan engine. I managed to get the remote loading of the suggestions to work (finally). Now the next hurdle is when a user clicks on a suggestion, how do I make that the word filled in the input? I thought this was probably done automatically but it doesn't for some reason? Is this just a basic line of JS I'm missing?

The input:

<input class="form-control typeahead playername-search">

This is the JS:

$(document).ready(function() {
     $('.playername-search').typeahead({                               
          name: "playername-search",                
          remote: 'http://xxxx/%QUERY',
          template: '<p><strong>{{short_name}}</strong> – {{rating}}</p>',
          engine: Hogan                                   
     });
});

One thing I have to mention, everything is inside a modal. Maybe that changes the situation? Thanks in advance!

Answer 1

This happens when typeahead doesn't know what data you want to fill in as a value. Make sure that JSON has either "value" property, or change it with valueKey

 $('.playername-search').typeahead({                               
      name: "playername-search",     
      valueKey: "short_name",           
      remote: 'http://xxxx/%QUERY',
      template: '<p><strong>{{short_name}}</strong> – {{rating}}</p>',
      engine: Hogan                                   
 });