动态的查询并且高亮度显示
[size=x-large]向让你的页面中查到的文本显示成高亮显示吗？那就请和我一起来做下去。
使用 observe_field 辅助方法来连续发送 ajax 查找请求到服务器。
我们先来创建一个 数据库迁移。
还需要将 Prototype JavaScript 库包含进去 通过创建下面的局部模版。
应用程序的index 视图 使用 Prototype JavaScript 辅助方法 observe_field. 定义一个观测字段， 这个模版还包括了用来存储查询解果的div 标签。
在你的 Search Controller 里写这样的代码 处理要搜索的内容。
最后查询结果的局部模版之需要简单的调用 highlight 辅助方法就是了。
使用 observe_field 辅助方法来连续发送 ajax 查找请求到服务器。
我们先来创建一个 数据库迁移。
db/migrate/001_create_articles.rb:
class CreateArticles < ActiveRecord::Migration
def self.up
create_table :articles do |t|
t.column :title, :string
t.column :body, :text
end
end
def self.down
drop_table :articles
end
end
还需要将 Prototype JavaScript 库包含进去 通过创建下面的局部模版。
app/views/layouts/search.rhtml:
<html>
<head>
<title>Search</title>
<%= javascript_include_tag :defaults %>
<style type="text/css">
#results {
font-weight: bold;
font-size: large;
position: relative;
background-color: #ffc;
margin-top: 4px;
padding: 2px;
}
</style>
</head>
<body>
<%= yield %>
</body>
</html>
应用程序的index 视图 使用 Prototype JavaScript 辅助方法 observe_field. 定义一个观测字段， 这个模版还包括了用来存储查询解果的div 标签。
app/views/search/index.rhtml:
<h1>Search</h1>
<input type="text" id="search">
<%= observe_field("search", :frequency => 1,
:update => "content",
:url => { :action => "highlight"}) %>
<div id="content">
<%= render :partial => "search_results",
:locals => { :search_text => @article } %>
</div>
在你的 Search Controller 里写这样的代码 处理要搜索的内容。
app/controllers/search_controller.rb:
class SearchController < ApplicationController
def index
end
def highlight
@search_text = request.raw_post || request.query_string
@article = Article.find :first,
:conditions => ["body like ?", "%#{@search_text}%"]
render :partial => "search_results",
:locals => { :search_text => @search_text,
:article_body => @article.respond_to?('body') ?
@article.body : "" }
end
end
最后查询结果的局部模版之需要简单的调用 highlight 辅助方法就是了。
app/views/search/_search_results.rhtml:
<p>
<%= highlight(article_body, search_text,
'<a href="http://en.wikipedia.org?search=\1" id="results"
title="Search Wikipedia for \1">\1</a>') %>
</p>[/size]