Jquery Typeahead 0.10.2在Rails 4/Bootstrap 3应用程序中未显示建议

我正在尝试将typeahead 0.10.2集成到Rails 4应用程序中，但在文本字段中输入内容时没有显示任何建议。我从最基本的例子开始，它已经失败了

Javascript 我已经下载了捆绑的js文件，并将其放在GitHub上的

vendor/assets/javascripts/typeahead_lib.js

下

jQuery插件在（GitHub上的）app/assets/javascripts/typeahead.js中调用，如下所示：

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.push({ value: str });
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

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

= form_tag('/search', :class => 'navbar-form navbar-left') do
  .form-group
    = label_tag('search', nil, :class => 'sr-only')
    = text_field_tag(:query, nil, :size => 17, :placeholder => 'Search', :class => 'form-control typeahead', :id => 'search')

这两个文件都包含在资产管道中，下面是清单（在GitHub上）：

HTML 文本字段位于引导程序的导航栏（GitHub上），Slim文件如下所示：

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.push({ value: str });
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

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

= form_tag('/search', :class => 'navbar-form navbar-left') do
  .form-group
    = label_tag('search', nil, :class => 'sr-only')
    = text_field_tag(:query, nil, :size => 17, :placeholder => 'Search', :class => 'form-control typeahead', :id => 'search')

将其转换为以下HTML：

<form accept-charset="UTF-8" action="/search" class="navbar-form navbar-left" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="us7C8pezJJkB+09kN3irL37o+hbUUfjd2EP+SFm0hc8=">
  </div>
  <div class="form-group">
    <label class="sr-only" for="search">Search</label>
    <input class="form-control typeahead" id="search" name="query" placeholder="Search" size="17" type="text">
  </div>
</form>

搜寻

实例

---

您可以在上查看整个网站，在那里可以找到（非功能性）搜索栏。我不知道如何调试这个，所以非常感谢您的帮助。提前谢谢

我不认为您的typeahead.js jQuery插件实际上正在运行

确保插件代码驻留在jQuery处理程序中，例如

$(document).ready(function() {

 var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    ...
}

（显然，用代码的其余部分替换省略号！）

还要确保您的网页正确引用此脚本