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

I'm trying to integrate typeahead 0.10.2 in my Rails 4 app, but no suggestions show up when entering something into the text field. I started with the most basic example, which fails already.

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

Javascript

I've downloaded the bundled js file and placed it under vendor/assets/javascripts/typeahead_lib.js (File on GitHub).

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

The jQuery plugin is called in app/assets/javascripts/typeahead.js (File on GitHub) and looks like this:

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

Both files are included in the assets pipeline, here's the manifest (File on GitHub):

这两个文件都包含在资产管道中,这里是清单(GitHub上的文件):

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

The text field is located in Bootstrap's navbar(File on GitHub), the Slim file looks like this:

文本字段位于Bootstrap的导航栏(GitHub上的文件)中,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')

which translates to the following HTML:

转换为以下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>

Live example

You can check the whole site on tf2movies.org, where the (non functional) search bar can be found. I don't have any idea how to debug this, so any help would be greatly appreciated. Thanks in advance!

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

1 个解决方案

#1

I don't think that your typeahead.js jQuery plugin is actually being run.

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

Make sure your plugin code resides within a jQuery ready handler e.g.

确保您的插件代码位于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');

    ...
}

(Obviously replace the ellipsis with the rest of your code!)

(显然用省略的代码替换省略号!)

Also ensure that your webpage is correctly referencing this script.

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

Javascript

HTML

Live example

1 个解决方案

#1

更多相关文章

随机推荐