Formtastic jQuery-UI

Adds some jQuery UI widgets as input types for Formtastic

Currently Supports:

Autocomplete
Calendar

Examples

Autocomplete

The autocomplete module adds jQuery UI’s autocomplete widget to belongs_to, has_many, and has_and_belongs_to_many relationships.

For best results use it with Searchlogic and Will Paginate as shown below

class Product
  belongs_to :brand
  has_and_belongs_to_many :categories
end

class Category
  has_and_belongs_to_many :products
end

The search results should be mapped into value/label pairs for a JSON query

class CategoriesController < ApplicationController
  def index
    @search = Category.search(params[:search])
    @categories = @search.paginate(:page => params[:page])
    respond_to do |format|
      format.html {}
      format.json { @categories.map { |category| {:label => category.title, :value => category.id} }.to_json }
    end
  end
end

class Brand
  has_many :products
end

class BrandsController < ApplicationController
  def index
    @search = Brand.search(params[:search])
    @brands = @search.paginate(:page => params[:page])
    respond_to do |format|
      format.html {}
      format.json { render :json => @brands.map { |brand| {:label => brand.name, :value => brand.id} }.to_json }
    end
  end
end

The input method takes two extra parameters:

:url – the URL of the data source (JSON formatted)
:param_name – the parameter that will be passed to the URL (as part of the search param)

<% semantic_form_for @product do |f| %>
  <% f.inputs do %>
    <%= f.input :categories, :as => :autocomplete, :url => categories_path(:format => :json), :param_name => 'title_begins_with' %>
    <%= f.input :brand, :as => :autocomplete, :url => brands_path(:format => :json), :param_name => 'name_begins_with' %>
  <% end %>
<% end %>

Datepicker

<% semantic_form_for @todo do |f| %>
  <% f.inputs do %>
    <%= f.input :due_date, :as => :datepicker
  <% end %>
<% end %>

Requirements

This addon requires the following components

Formtastic (tested with v1.1.0)
jQuery (tested with v1.4.2)
jQuery UI� (tested with v1.8.5)
- 1.7 will not work as it does not include the autocomplete widget
- Don’t forget to include the necessary CSS and include the images in your project

formtastic_jquery_ui

Runtime

Formtastic jQuery-UI

Examples

Autocomplete

Datepicker

Requirements