未捕获的TypeError：$（...）。使用typeahead.js时，typeahead不是函数

Question

我试图用typeahead.js

做一个基本的例子

我按以下顺序添加了文件。

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <script type="text/javascript" src="assets/typeahead.js"></script>

（应用程序js包含jquery）

以下是我的初始化代码。

$('#custom-templates .typeahead').typeahead(null, {
  name: 'best-pictures',
  display: 'value',
  source: '/search',
  templates: {
    empty: [
      '<div class="empty-message">',
        'unable to find any Best Picture winners that match the current query',
      '</div>'
    ].join('\n'),
    suggestion: function(data) {
    return '<p><strong>' + data.name + '</strong> – ' + data.id + '</p>';
}
  }
});

，标记为

<div id="custom-templates">
            <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
            </div>

但在控制台中我收到以下错误。

Uncaught TypeError: $(...).typeahead is not a function when using typeahead.js并且没有其他错误。 我做错了什么？

当我检查页面源时，

typeahead.js也已正确加载。