Question

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

问题是我的jquery根本没有拿起.typeahead动作。在输入字段中输入时，我看到绝对没有动作。

我希望以后能够从外部数据库获得结果，但是现在我只想在输入文本框中输入一些反应。

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

从http://twitter.github.io/typeahead.js/下载并存储在public / javascripts /中的typeahead.bundle.js。（我试图安装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>

有人可以给我一些关于如何在这个文本字段中输入时得到一些反应的建议吗？

由于 HEC

Answer 1

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

供应商文件夹适用于所有第三方库，可在此处找到更多信息 http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

将其添加到vendor文件夹后，打开application.js并在require tree

之前添加以下行

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

});

Answer 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  %>' />

typeahead.js根本没有响应 - rails

2 个答案: