Bootstrap 3.1.0 with Typeahead

Question

I have a website built in Bootstrap v3.1.0 and inside I have a text input field. I want to apply auto-complete to it, but can't get Typeahead.js to work!

When I type something in, I get no auto-complete !

View Code:

@Html.TextBoxFor(x => x.Manufacturer, new { @class = "form-control manufacturer" })
@Html.ValidationMessageFor(x => x.Manufacturer)

JS Code

$(function() {
    $('.manufacturer').typeahead(null,
        {
            name: 'manufacturers',
            local: ["Audi",
                    "BMW",
                    "Vauxhall",
                    "Toyota"
                   ]
        });
});

What am I doing wrong? I also added the autocomplete="off" to my input field, but that still did not do anything. I also made sure that all scripts are being loaded.

Answer 1

It seems as though if you are using 'HEAD' of twitter typeahead you are a bit behind the curve in your examples.

var cars = new Bloodhound({
  datumTokenizer: function (d) {
      return Bloodhound.tokenizers.whitespace(d.car);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: [{
      car: "Audi"
  }, {
      car: "BMW"
  }, {
      car: "Vauxhall"
  }, {
      car: "Toyota"
  }]
});

$(function () {
    cars.initialize();
    $('.manufacturer').typeahead(null, {
        name: 'manufacturers',
        displayKey: 'car',
        source: cars.ttAdapter()
    });
});

Also a fiddle in action: http://jsfiddle.net/Mutmatt/7jxRy/

Most of the info can be found at http://twitter.github.io/typeahead.js/examples/ and https://github.com/twitter/typeahead.js