帶Typeahead的Bootstrap 3.1.0

Question

我有一個內置Bootstrap v3.1.0的網站，裏面有一個文本輸入框。我想對其應用自動完成功能，但無法使Typeahead.js正常工作！

當我輸入內容時，我沒有自動完成！

查看代碼：

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

JS代碼

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

我在做什麼錯？我還將autocomplete="off"添加到我的輸入字段，但仍然沒有做任何事情。我也確保所有的腳本都被加載。

我將不勝感激任何幫助。

謝謝。

Answer 1

看起來您好像是在使用twitter headahead的「HEAD」，您在示例中的曲線後面有點偏移。

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() 
    }); 
}); 

此外，在行動小提琴：http://jsfiddle.net/Mutmatt/7jxRy/

大部分的信息都可以在http://twitter.github.io/typeahead.js/examples/和https://github.com/twitter/typeahead.js

找到