twitter-bootstrap-3bootstrap-typeahead

Bootstrap 3.1.0 with Typeahead


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.


Solution

  • 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