如何使用外部文件为 Bootstrap 3 正确链接和启用 Typeahead？答案

【问题标题】：How to I properly link and enable Typeahead for Bootstrap 3 using an external file?如何使用外部文件为 Bootstrap 3 正确链接和启用 Typeahead？
【发布时间】：2016-05-02 17:48:35
【问题描述】：

我得到了this example，它在没有注释带有 JavaScript 的 loooooong 行的情况下可以正常工作。（我猜这是 Typeahead 的脚本。）

!function(a){...}
$('#query').typeahead({ local: ['alpha','bravo','charlie'] });

<div class="form-group">
  <input class="form-control" name="query" id="query" type="text">              
</div>

当然，我不希望那条线在那里。相反，我尝试将其从外部链接（通过 HTML 中的注释行），并使其成为捆绑包的一部分。

问题是如何在该示例中使预输入工作而不需要将脚本文件的所有内容显式推入我的代码中。

【问题讨论】：

标签： javascript asp.net-mvc twitter-bootstrap typeahead.js

【解决方案1】：

看来 bootply 可能不是使用外部库的好地方。我不确定，因为我只将它用于 Bootstrap 特定的东西。

I explicitly added a link to jQuery 并停止与 jQuery 相关的错误，但这并不能修复您的预输入实现。如果您在尝试运行时检查浏览器开发工具，您将看到与 JavaScript 相关的错误。我认为有问题的引导程序引用了 Typeahead.js 不支持的 JavaScript 版本。

您还使用了 0.9.3 版（之前的几个版本），我从未使用过该版本，并且当前文档中未引用该版本。因此，我提供了一些关于在当前版本 (1.11) 中使用它的信息。

Here is an example on jsfiddle应该和你的例子基本一样。

有几件事需要改变：

typeahead 的基本声明是 jQuery#typeahead(options, [*datasets])', withdatasets` 是可选的。我使用的示例是声明一个带有选项哈希和数据集定义的预先输入：

$('#query').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'states',
  source: substringMatcher(vals)
});

在使用bloodhound 时，唯一引用带有预输入的local。

Here is an example 使用 Bloodhound 和本地数据源。

不同之处在于你声明了寻血猎犬实例：

var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in "The Basics"
  local: globalResults
});

然后将该实例提供给预先输入：

$('#search-input').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'myMatches',
  source: states
});

这里有the docs for typeahead，可能会让您更深入地了解。

【讨论】：