jquery - Typeahead 0.10.2 在 Rails 4/Bootstrap 3 应用程序中不显示建议

Question

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

Javascript

我已经下载了捆绑的 js 文件并将其放置在 vendor/assets/javascripts/typeahead_lib.js 下(GitHub 上的 File)。

jQuery 插件在 app/assets/javascripts/typeahead.js(GitHub 上的 File)中调用，如下所示:

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

这两个文件都包含在 Assets 管道中，这是 list (GitHub 上的 File):

//= require jquery
//= require jquery_ujs
//= require typeahead_lib
//= require typeahead
//= require rails-timeago
//= require fitvid_lib
//= require fitvid
//= require mixitup_lib
//= require mixitup
//= require slick_lib
//= require_tree .
//= require bootstrap
//= require cocoon

HTML

文本字段位于 Bootstrap 的导航栏(GitHub 上的 File)，Slim 文件如下所示:

= 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>

实例

您可以在 tf2movies.org 上查看整个网站，可以在其中找到(非功能性)搜索栏。我不知道如何调试这个，所以任何帮助将不胜感激。提前致谢!

Answer 1

我认为您的 typeahead.js jQuery 插件实际上并未运行。

确保您的插件代码位于 jQuery ready 中处理程序例如

$(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');

    ...
}

(显然用代码的其余部分替换省略号!)

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