formtastic_jquery_ui

h1. Formtastic jQuery-UI

Adds some "jQuery UI":http://jqueryui.com widgets as input types for "Formtastic":http://github.com/justinfrench/formtastic

Currently Supports:

• Autocomplete
• Calendar

h2. Examples

h3. 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":http://github.com/binarylogic/searchlogic and "Will Paginate":http://github.com/mislav/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 %>

h3. Datepicker

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

h2. Requirements

This addon requires the following components

• "Formtastic":http://github.com/justinfrench/formtastic (tested with v1.1.0)
• "jQuery":http://jquery.com (tested with v1.4.2)
• "jQuery UI":http://jqueryui.com (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

Copyright (c) 2010 Paul Smith, released under the MIT license