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