typeahead.js 完全没有响应 - rails答案

【问题标题】：typeahead.js not responding at all - railstypeahead.js 完全没有响应 - rails
【发布时间】：2014-04-22 07:14:20
【问题描述】：

我已经坚持了两天了。我正在尝试通过在 rails 4 中使用 typeahead.js 来进行搜索自动完成。

问题是我的 jquery 根本没有选择 .typeahead 动作。在我的输入字段中输入时，我完全看不到任何动作。

我很想稍后从外部数据库中获取结果，但现在我只想在输入该输入文本框时得到一些反应。

我的 app/views/layout/application.html.erb 文件如下所示：

typeahead.bundle.js 从http://twitter.github.io/typeahead.js/ 下载并存储在 public/javascripts/ 中。（我尝试安装 twitter-typeahead-rails gem 并按照说明进行操作，但这对我也不起作用。）

<!-- Include typeahead.js -->
<%= javascript_include_tag 'typeahead.bundle.js' %>

javascript 就在 javascript 包含标签下方

<script type="text/javascript">

$(document).ready(function(){

    $('input.typeahead').typeahead({

      name: 'accounts',

      local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']

    });

});  

</script>

我希望输入框出现在我的 twitter bootsrap 导航栏中的区域。

<ul class="nav">
<li>
            <div>
              <input class="typeahead" type="text" placeholder="Start typing name of your school....">
            </div>
          </li>
</ul>

谁能给我一些建议，告诉我在这个文本字段中输入时如何得到一些反应？

谢谢赫克

【问题讨论】：

我检查了您提供的链接。该示例说明 typeahead 采用两个参数：jQuery#typeahead(options, [*datasets])。我认为应该将数据添加为第二个参数。如本例所示：twitter.github.io/typeahead.js/examples
你是 100% 正确的。将选项和数据集分开对我有用。

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

【解决方案1】：

typeahead.bundle.js 文件位于 vendor/assets/javascripts/typeahead.js 中

vendor 文件夹用于所有第三方库，更多信息可以在这里找到 http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

将它添加到供应商文件夹后，打开你的 application.js 并在 require 树之前添加以下行

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require typehead
//= require_tree .

也不要在模板中放javascript，js文件放在app/assets/javascripts/ 您可以随意命名文件。然后输入以下代码。

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

      // 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 cars = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']

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

});

【讨论】：

【解决方案2】：

<% local = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen'] %>   
<input type="text" name="industries" placeholder="Select industries.." data-provide="typeahead" data-source='<%= local  %>' />

【讨论】：