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

【问题标题】：Typeahead 0.10.2 does not show suggestions in Rails 4 / Bootstrap 3 appTypeahead 0.10.2 在 Rails 4 / Bootstrap 3 应用程序中不显示建议
【发布时间】：2014-04-06 23:02:10
【问题描述】：

我正在尝试将 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)
});

这两个文件都包含在资产管道中，这是清单（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 上查看整个网站，其中可以找到（非功能性）搜索栏。我不知道如何调试这个，所以任何帮助将不胜感激。提前致谢！

【问题讨论】：

标签： jquery ruby-on-rails typeahead.js typeahead

【解决方案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');

    ...
}

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

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

【讨论】：