jquery - typeahead.js 根本没有响应 - Rails

Question

我已经被这个问题困扰了两天了。我正在尝试通过在 Rails 4 中使用 typeahead.js 来自动完成搜索。

问题是我的 jquery 根本没有接收 .typeahead 操作。在输入字段中输入内容时，我完全看不到任何操作。

我希望稍后从外部数据库获取结果，但现在我只想在输入文本框中键入内容时得到一些 react 。

我的 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 include 标记下方的 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>

有人可以给我一些建议，告诉我如何在此文本字段中输入内容时得到一些 react 吗？

谢谢赫克

Answer 1

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

供应商文件夹适用于所有第三方库，可以在此处找到更多信息 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)
  });

});