Typeahead Control Not Working

Question

I am trying to use typeahead.js. My code looks like this:

<input id="query" type="search" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search by typing anything" />

...

var URL_ROOT = '[populated on server. Something like "http://localhost:8080"]';
var suggestions = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: URL_ROOT + '/api/suggestions?querytext=%QUERY'
}); 
suggestions.initialize();

$(document).ready(function() {
  $('input.typeahead').typeahead({
    source: suggestions.ttAdapter()
  });
});

When the page loads, I do not see any errors in the console window. As I type though, I do not see any requests to the server in Fiddler. I would expect as I typed to see requests being made to the server to find suggestions. What am I doing wrong?

Can you please include a sample of the JSON you are passing to your Typeahead instance? — Ben Smith, Jan 09 '15 at 22:04
can you please tell me why my answer didn't get the bounty? It was the first and correct answer — arisalexis, Jan 11 '15 at 18:21
I am sorry but I answered your question about why you don't get hits to the server when typing and the answer is correct. The other guy answered something you didn't ask for. please respect the rules and give my answer the bounty. — arisalexis, Jan 13 '15 at 08:23

score 0 · Answer 1 · edited Jan 09 '15 at 15:12

0

$('input.typeahead').typeahead(null,{
    source: suggestions.ttAdapter()
});

edited Jan 09 '15 at 15:12

Martin Tournoij

26,737
24
105
146

answered Jan 09 '15 at 14:30

arisalexis

2,079
2
21
42

its sad to see this answer not getting the bounty as it produces requests as the user asks. Answering alternative not asked questions that enhance the answer is ok but still, I answered this many hours earlier. Having a high rating should not matter. – arisalexis Jan 12 '15 at 08:55

score 0 · Accepted Answer · edited May 23 '17 at 12:21

I suspect it's because your instance of Bloodhound is unaware as how to deal with the remote datasource you are feeding it.

In:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')

you have specified 'value'. Does the JSON you are passing have JSON objects with a 'value' key? If not the datums will not be parsed and so Typeahead will not show any suggestions.

Also your instance of Typeahead is not quite right (see here for the documentation). You are missing an "options" object (pass in null if you are happy with the defaults). Additionally the datasets array parameter is missing a "displayKey" value; this tells Typeahead what to use as a suggestion value. Hence you should have:

$('input.typeahead').typeahead(null,{
    source: suggestions.ttAdapter(),
    displayKey: 'value' });

A complete working example of Typeahead.js using a remote datasource can be found here.

score -4 · Answer 3 · answered Jan 09 '15 at 14:19

I feel that the jQuery is not even triggered as you have multiple class ids. Try changing it from

class="form-control typeahead tt-query"

to

class="typeahead"

Alternatively, try removing 'input' from your jQuery (as shown below)

$('.typeahead').typeahead({

Typeahead Control Not Working

3 Answers3