typeahead.js not responding at all - rails

Question

I have been stuck with this for two days now. I am trying to make a search autocomplete by making use of typeahead.js in rails 4.

The problem is that my jquery is not picking up the .typeahead action at all. I see absolutely no action when typing in my input field.

I would love to get results from an external database later, but for now I just want to get some reaction when typing in that input text box.

My app/views/layout/application.html.erb file looks like this:

typeahead.bundle.js downloaded from http://twitter.github.io/typeahead.js/ and stored in public/javascripts/. (I have tried to install the twitter-typeahead-rails gem and follow the instructions but that has also not worked for me.)

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

javascript just below the javascript include tag

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

The area in my twitter bootsrap navbar where I would like the input box to appear.

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

Can somebody please give me some advice on how to get some reaction when typing in this text field?

Thanks Hec

Answer 1

the typeahead.bundle.js file goes in vendor/assets/javascripts/typeahead.js

vendor folder is for all third party libraries, more info can be found here http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

after you added it to vendor folder open your application.js and add the following line before require tree

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

also don't put javascript in the template, js files are placed in app/assets/javascripts/ you can name the file how ever you want. Then put in the following code.

$(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  %>' />