TypeAhead Autocomplete Not WOrking after Second Character is typed and css looks broken

Question

Here is my JS with typeahead 0.10.0 with bootstrap 3 and Asp.net MVC 5

var jobCodes = new Bloodhound({
    datumTokenizer: function (d) { return d.JobName; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: "/api/jobservice/getjobcodes"
});

jobCodes.initialize();

$('#jobquery').typeahead(null, {
    name: 'job-codes',
    displayKey: 'JobName',
    source: jobCodes.ttAdapter()
});

Here is a sample of my JSON data that comes back:

[{"JobCodeId":101,"JobName":"Agricultural Sciences\r"},{"JobCodeId":102,"JobName":"Animal Sciences\r"},{"JobCodeId":103,"JobName":"Plant & Soil Sciences\r"}]

First Problem I have is when I type first character i do see suggestions but no css for box like in typeahead example am I missing any css?

Second problem is when i type 2nd character suggestions go away as you can see in the screen shot below.

Answer 1

I had the same problem when I entered the second character, but I updated the Bloodhound datumTokenizer from this:

datumTokenizer: function (d) { return d.TagName; },

... to this:

datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.TagName); },

I'm not sure what the Bloodhound.tokenizers.whitespace does but it did the trick for me.

As for the CSS, I used this stylesheet based on this issue - but I found out it doesn't work with the latest version of typeahead.js