Try example at : Demo Typeahead
Add Gemfile
gem 'bootstrap-typeahead-rails', '~> 0.10.5.1'Run command to install gem
$ bundle install
Add gon Gem
gem 'gon'
$ bundle install
Add following line to application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>TenderMessenger</title>
<%= include_gon %>
...other scripts, etc.
</head>
Add Gon to your controllers. The idea is to assign your Rails variable to a Gon variable (which will become a JavaScript variable). In my case, trying to pass users’ names and images, it looked like this:
def index
gon.usernames = User.pluck(:name)
gon.gravatars = User.all.map { |user| user.gravatar }
# ...other code that belongs in the controller action
end
You can assign any array to the Gon variable. Both of my examples return arrays by calling methods (ActiveRecord query for usernames and mapping image links), but you could just as easily do gon.variable = [example1, example2, example3] (though, as we’ll see, you could add this data straight into your JavaScript file)
Assign that Gon variable to a JavaScript variable. In whatever .js file you choose, assign
// Other javascript... var gravatars = gon.gravatars var usernames = gon.usernames; // More javascript
Open application.js
//= require twitter/typeaheadDetermine the css selector for the input on which you want to implement typeahead. In my case, I added a class of “typeahead” to my targeted text field as follows:
<!-- ...preceding html/erb... -->
<%= text_field_tag :name_or_email, nil, placeholder: "To: name or email", class: "typeahead" %>
<!-- ... -->
- In whichever JavaScript file you’ve made the dataset available, add
$('.typeahead').typeahead()
. Replace “.typeahead” with whatever CSS selector you’re using (see previous step). You now have the entire structure into which you can try the various typeahead.js examples.
- I started with the basics, copying line 1-23 above my typeahead method, and everything withing the curly braces from line 37-44 into my typeahead method. Make sure to change the example’s default variable (“states” in the basic example, “best-pictures” in the custom templates example) to whatever variable you assigned using Gon. Depending on how your Rails app is structured–particularly what your asset pipeline looks like–this may be all you need.
- I had conflicting stylesheets and JavaScript files, plus I wanted more flexibility creating templates for the typeahead, so I implemented the custom templates example. Full code for what I describe is below.
// Twitter Typeahead
$(document).ready(function() {
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
matches = [];
substrRegex = new RegExp(q, 'i');
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push({ value: str });
}
});
cb(matches);
};
};
var gravatars = gon.gravatars;
var usernames = gon.usernames;
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1,
},
{
name: 'usernames',
displayKey: 'value',
source: substringMatcher(usernames),
templates: {
empty: [
'<div class="empty-message">',
'No username matches found. Enter an email instead!',
'</div>'
].join('\n'),
suggestion: function(username){
return '<div id="user-selection">' +
'<p><strong>' + username.value + '</strong></p>' +
'<img src="' + gravatars[usernames.indexOf(username.value)] + '"/>' +
'</div>' ;
}
}
});
});
rubyonrails typeahead

0 comments:
Post a Comment