兑现实时的搜索

实现实时的搜索
[size=large][/size][color=green]实现实时的搜索
a live search

如果你想着在你的页面进行实时的搜索--就是到你在输入不同关键字的时候，查询的解果将发生变化。

使用 rails 的ajax 辅助方法创建一个实时搜索
数据库的迁移

db/migrate/001_create_books.rb:class CreateBooks &lt; ActiveRecord::Migration  def self.up    create_table :books do |t|      t.column :title, :string    end    Book.create :title =&gt; 'Perl Best Practices'    Book.create :title =&gt; 'Learning Python'    Book.create :title =&gt; 'Unix in a Nutshell'    Book.create :title =&gt; 'Classic Shell Scripting'    Book.create :title =&gt; 'Photoshop Elements 3: The Missing Manual'    Book.create :title =&gt; 'Linux Network Administrator's Guide'    Book.create :title =&gt; 'C++ Cookbook'    Book.create :title =&gt; 'UML 2.0 in a Nutshell'    Book.create :title =&gt; 'Home Networking: The Missing Manual'    Book.create :title =&gt; 'AI for Game Developers'    Book.create :title =&gt; 'JavaServer Faces'    Book.create :title =&gt; 'Astronomy Hacks'    Book.create :title =&gt; 'Understanding the Linux Kernel'    Book.create :title =&gt; 'XML Pocket Reference'    Book.create :title =&gt; 'Understanding Linux Network Internals'  end  def self.down    drop_table :books  endend

接着，使用　　 script.aculo.us and Prototype
包含到布局中去。

app/views/layouts/books.rhtml:&lt;html&gt;  &lt;head&gt;    &lt;title&gt;Books&lt;/title&gt;    &lt;%= javascript_include_tag :defaults %&gt;  &lt;/head&gt;  &lt;body&gt;    &lt;%= yield  %&gt;  &lt;/body&gt;&lt;/html

创建包含index and search 方法的控制器。　ｓｅａｒｃｈ方法对从ｉｎｄｅｘ视图发过来的ａｊａｘ调用做出响应。

app/controllers/books_controller.rb:class BooksController &lt; ApplicationController  def index  end  def get_results    if request.xhr?      if params['search_text'].strip.length &gt; 0        terms = params['search_text'].split.collect do |word|            "%#{word.downcase}%"         end             @books = Book.find(          :all,             :conditions =&gt; [            ( ["(LOWER(title) LIKE ?)"] * terms.size ).join(" AND "),            * terms.flatten          ]               )             end           render :partial =&gt; "search"     else          redirect_to :action =&gt; "index"     end  endend

index.rhtml 　视图显示了查询字段，并使用observe_field 这一JavaScript 辅助方法在字段中定义一个观察者。　

app/views/books/index.rhtml:&lt;h1&gt;Books&lt;/h1&gt;Search: &lt;input type="text" id="search_form" name="search" /&gt;&lt;img id="spinner" src="/images/indicator.gif" style="display: none;" /&gt;  &lt;div id="results"&gt;&lt;/div&gt;&lt;%= observe_field 'search_form',  :frequency =&gt; 0.5,   :update =&gt; 'results',  :url =&gt; { :controller =&gt; 'books', :action=&gt; 'get_results' },  :with =&gt; "'search_text=' + escape(value)",  :loading =&gt; "document.getElementById('spinner').style.display='inline'",  :loaded =&gt; "document.getElementById('spinner').style.display='none'" %&gt;

最后，创建一个局部模版，　将查询结果显示为一个书本标题列表。

app/views/books/_search.rhtml:&lt;% if @books %&gt;  &lt;ul&gt;    &lt;% for book in @books %&gt;      &lt;li&gt;            &lt;%= h(book.title) %&gt;      &lt;/li&gt;       &lt;% end %&gt;  &lt;/ul&gt;&lt;% end %&gt;

[/color]

兑现实时的搜索

热点推荐