Using Typeahead from Twitter Bootstrap in a Form (Formtastic)

Using Typeahead from Twitter Bootstrap in a form (formtastic)

In your controller

def index
  @autocomplete_items = Model.all
end

In your view, just like you have with an additional ID for the selector...

<% semantic_form_for(@education) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.input :college, placeholder: "Update Education", id: "auto_complete" %>
  </div>
  <%= f.submit "Submit", class: "btn btn-large btn-primary" %>
<% end %> 

And most importantly, pass the @autocomplete_items instance variable defined in your controller into a Javascript variable in your view:

<%= javascript_tag "var autocomplete_items = #{ @autocomplete_items.to_json };" %>

This will serialize your data and make it usable JSON for the Typeahead function to use.

As for the Typeahead, simply pass that object (@autocomplete_items) as JSON to the Javascript like so:

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#auto_complete').typeahead({source: autocomplete_items});
    });
</script>

Additionally there is an Autocomplete gem for Rails 3 which will work directly with your models rather than passing off the object to your Javascript. There is even a Formtastic example in the documentation.

Edit: It looks like I didn't read your whole question! Unfortunately HTML5 Data Attributes are currently unsupported with Formtastic. There is however a separate branch that does include support for these attributes.

Other than that there's always just sticking with Good ol' HTML/ERB for dynamic features like this...

<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="8" data-source='<%= @autocomplete_items.to_json %>'>

EDIT 2: I've just noticed two things. First being the way I was passing the JSON object to a Javascript variable (see the example). Secondly, the above example using HTML5 data attributes will not work with Twitter's Typeahead plugin, but it will work with the jQuery UI Autocomplete plugin.

How to get typeahead/autocomplete text to refer to foreign id in Rails?

Turns out that I need to have these getter and setter methods in my model file. These will then do the work of finding the corresponding id.

  def cargo_to_unload_name
    cargo_to_unload(:name)
  end

  def cargo_to_unload_name=(name)
    self.cargo_to_unload = Cargo.find_by_name(name)
  end

  def cargo_to_load_name
    cargo_to_load(:name)
  end

  def cargo_to_load_name=(name)
    self.cargo_to_load = Cargo.find_by_name(name)
  end

Active Admin strip form input

One not recommended way is:

f.input :attr, as: :string, html_options: { value: f.object.attr.try(:strip) }

But then you might interfere with formtastic internals, or with localization or someting else. This imho is the better way: use a before validation hook in your ActiveRecord model:

class YourModel < ApplicationRecord
  before_validation :strip_whitespace
   
  def strip_whitespace
    self.attr = self.attr.try(:strip)
  end
end

using bootstrap for rails 4 scaffold form

Formtastic and simple_form are great gems, but you don't need them to bootstrap your forms. However, formtastic-bootstrap does make it more convenient to apply bootstrap.

So if you want a quick solution AND a great formbuilder at the same time you could definitively use the gem. If you want to learn bootstrap on the other hand I would recommend to get down and dirty and manually add bootstrap to your forms based on the examples given on getbootstrap.com.

Splitting a form(tastic) into a three-column layout

Turns out I was in some crazy haze when I posted this question and didn't think to grid inside of the formtastic helper. For example:

= semantic_form_for @something do |f|
  .grid_4
    # Part 1 of form
  .grid_4
    # Part 2 of form
  .grid_4
    # Part 3 of form

Which gives me a nicely split up big nested form.

Rails Tagging with autocomplete

So the best solution for this one is covered in Jad Chahine's answer to similar problem

https://stackoverflow.com/a/36350998/10253611

Simply adding bootstrap-tagsinput library to my project and passing data-role to my input field (although for now it is without autocomplete, but good for start):

<div class = 'col-md-8 offset-2'>
  <h1 class = 'text-center'>New Blog Post</h1>
  <%= simple_form_for @product, url: tag_link_product_url(@product), remote: true do |f| %>
  <p><small id='tag_links'>Tags: <%= raw @product.tags.order(:name).map { |tag| link_to tag.name, products_path(q: { tags_id_eq: tag.id }) }.join(', ') %></small</p>
  <%= f.text_field :tag_list, collection: Tag.order(:name), 'data-role': 'tagsinput', input_html: { multiple: true, class: 'chosen-select' } %>
  <%= f.submit "Next", class: 'btn btn-primary' %>
 <% end %>
</div>

---

Related Topics