Bootstrap 3.3.0 + Typeahead在表单控件中

Question

我有一个带有以下软件包的ASP.NET MVC 5应用程序：

• Typeahead.js
• 适用于MVC 5的Typeahead.js
• typeahead.js-bootstrap.css
• Bootstrap（3.3.0）

我无法在页面中正确呈现自动填充输入文本（在其他输入下方并对齐）。

HTML

    <div class="form-group">
        <div class="col-sm-10">
            <label class="control-label col-sm-2">Name</label>
            <input class="form-control" type="text">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10">
            <label class="control-label col-sm-2">Test</label>
            <input id="search" class="form-control" type="text" placeholder="test">
        </div>
    </div>

JAVASCRIPT

<script type="text/javascript">
 var engine = new Bloodhound({
     datumTokenizer: function (d) { return d.value; },
     queryTokenizer: Bloodhound.tokenizers.whitespace,
     local: [{ value: 'dog animal' }, { value: 'pig animal' }, { value: 'moose animal' }, { value: 'bird ' }]
 });

 engine.initialize();

 $('#search').typeahead(null, {
     name: 'animals',
     source: engine.ttAdapter()
 })
</script>

页