通过 Rails 在 Web 应用程序中使用 Ajax（3）
|
- UID
- 1066743
|
通过 Rails 在 Web 应用程序中使用 Ajax（3）
自动完成字段Rails 使得构建自动完成字段极其简单。首先要在 index.rhtml 模板中增加一些东西。修改后的版本如 所示。
清单 14. 修改后的 index.rhtml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <html>
<head>
<%= javascript_include_tag :defaults %>
<style>
div.auto_complete {
width: 300px;
background: #fff;
}
div.auto_complete ul {
border: 1px solid #888;
margin: 0px;
padding: 0px;
width: 100%;
list-style-type: none;
}
div.auto_complete ul li {
margin: 0px;
padding: 3px;
}
div.auto_complete ul li.selected {
background-color: #ffb;
}
div.auto_complete ul strong.highlight {
color: #800;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<%= form_tag nil, { :id => 'search_form' } %>
<p><%= text_field 'recipe', 'name', :autocomplete => 'off' %></p>
<div class="auto_complete" id="recipe_name_auto_complete"></div>
<%= auto_complete_field :recipe_name,
:url => { :action=>'autocomplete_recipe_name' },
:tokens => ',' %>
<%= end_form_tag %>
...
|
文件上方的级联样式表（CSS）部分用于自动完成字段的下拉列表。此外还对 text_field 略做修改关闭浏览器的自动完成机制。下拉列表中的项放在新增的 <div> 中，这些项将调用 auto_complete() 方法。auto_complete() 辅助方法创建客户端 JavaScript 代码调用服务器上的 autocomplete_recipe_name() 方法以及 recipe name 文本字段的当前内容。
RecipesController 的 autocomplete_recipe_name() 方法搜索该名称，如 所示。
清单 15. Recipes_controller.rb1
2
3
4
5
6
7
8
9
| class RecipesController < ApplicationController
...
def autocomplete_recipe_name
@recipes = Recipe.find( :all,
:conditions => [ "name LIKE ?",
"%#{params[:recipe][:name]}%" ] )
render :layout=>false
end
end
|
还需要一个 ERB 模板建立列表，如 所示。
清单 16. Autocomplete_recipe_list.rb1
2
3
4
5
| <ul class="autocomplete_list">
<% @recipes.each { |r| %>
<li class="autocomplete_item"><%= r.name %></li>
<% } %>
</ul>
|
自动完成系统查找一个 HTML 列表（<ul>），其中每个列表项都是一个 option。使用 index.rhtml 页面的 CSS （或者您提供的样式表）格式化。
为了查看自动完成的效果，在浏览器中打开页面，然后输入 test。我在 test 菜谱中加入了一些数据。结果如 所示。
图 5. 下拉自动完成列表 可以使用上下箭头键选择一个选项然后按 Enter 键选择。这样将把选择的内容复制到文本字段中。
非常灵活，感谢 Rails 体系结构，它使这很容易实现。 |
|
|
|
|
|
