rails2.0之前类库里已经封装了自动完成功能,rails2.0以后被分离了出来,作为插件使用.

插件作用:能够实现自动完成 和 自动提示 功能

我的环境:ruby1.8.6 + rails 2.1.0

效果预览:

使用案例一:(简单的使用)

1,下载插件

(1),直接到网站上下载 http://github.com/rails/auto_complete/tree/master

(2),在项目中下载,进入项目目录 输入 ruby script/plugin auto_complete 自动安装插件到项目下,默认是从http://dev.rubyonrails.com/svn/rails/plugins 站点下载的,所以完整的下载路径是

ruby script/plugin install http://dev.rubyonrails.com/svn/rails/plugins/auto_complete/

这里可以利用 ruby script/plugin list 查看有哪些插件可以下载

2,直接按照插件的 readme 操作(请查看插件的readme)

# Controller
class BlogController < ApplicationController
auto_complete_for :post, :title #post对应着model(即表),title对应着表的一个字段
end

# View
<%= text_field_with_auto_complete :post, title %>

3,在layouts下 新建一个blog.rhtml,把下面代码包括进来

<%= javascript_include_tag :defaults %>

4,如果到这里你还是没有成功的话,建议在controller中添加

skip_before_filter :verify_authenticity_token, :only => [:auto_complete_for_post_title] #我做的时候就是加了这个skip filter的,不然运行不稳定

5,ok....success!

案列二:(加一些约束条件)

其它步骤基本不变,可以在model中指定显示的条数和字段 什么的

eg:

Model中:

class Fruit < ActiveRecord::Base
# 定义一个查询方法，
def self.find_fruit_by_part(part)
# 查询出所有name匹配part的水果实体，最多显示5条
Fruit.find(:all,    :conditions => ["name LIKE ?", "%" + part + "%" ],:limit => 5);
end
end

Controller中:

class FruitController < ApplicationController

skip_before_filter :verify_authenticity_token, :only => [:auto_complete_for_user_fruit] 
def index
end

def auto_complete_for_user_fruit    
begin
fruit = params[:user][:fruit]
rescue
# 如果不能正常取得请求参数，给一个默认参数
fruit = "an"
end     
@results = Fruit.find_fruit_by_part(fruit);    
render :inline => "<%= auto_complete_result @results, 'name' %>"
end

end

view中:

<h3>测试自动完成功能</h3>
<p>
<%= text_field_with_auto_complete :fruit, :name %>
</p>

案列三:添加css样式

css:

.useraddress{
font-size:12px;
color:#628B24
}

controller:
class MessageController < ApplicationController

skip_before_filter :verify_authenticity_token, :only => [:auto_complete_for_message_to]

def auto_complete_for_message_to()
user_name = params[:message][:to]
@customers = Customer.find(:all , :conditions=>"name like '%"+user_name.downcase+"%'")
render :partial => 'username'
end

end

view:

new.rhtml

auto_complete 自动提示:<br/><br>
<%= text_field_with_auto_complete 'message', 'to',{}, :skip_style => false %>

_username.rhtml

<ul class="allusers">
<% for customer in @customers do %>
<li class="thisuser">
<div class="username">
<%=h customer.name %>
</div>
<div class="useradd">
<span class="useraddress">
<%=h customer.address %>
</span>
</div>
</li>
<% end %>
</ul>

案列源码下载:

http://www.namipan.com/d/080744d037c133836019281306a7d90e1e546d8a3d970100

ref:

http://share-facts.blogspot.com/2009/02/autocompleter-example-in-ruby-on-rails.html
http://jbf034.javaeye.com/blog/215429

续:

如果想修改默认的auto_complete的css样式,到auto_complete_macros_helper.rb文件下找到auto_complete_stylesheet方法修改即可,我修改后的css