[size=large][/size][color=green]实现实时的搜索
a live search
如果你想着在你的页面进行实时的搜索--就是到你在输入不同关键字的时候，查询的解果将发生变化。
使用 rails 的ajax 辅助方法 创建一个实时 搜索
数据库的迁移
db/migrate/001_create_books.rb:
class CreateBooks < ActiveRecord::Migration
def self.up
create_table :books do |t|
t.column :title, :string
end
Book.create :title => 'Perl Best Practices'
Book.create :title => 'Learning Python'
Book.create :title => 'Unix in a Nutshell'
Book.create :title => 'Classic Shell Scripting'
Book.create :title => 'Photoshop Elements 3: The Missing Manual'
Book.create :title => 'Linux Network Administrator's Guide'
Book.create :title => 'C++ Cookbook'
Book.create :title => 'UML 2.0 in a Nutshell'
Book.create :title => 'Home Networking: The Missing Manual'
Book.create :title => 'AI for Game Developers'
Book.create :title => 'JavaServer Faces'
Book.create :title => 'Astronomy Hacks'
Book.create :title => 'Understanding the Linux Kernel'
Book.create :title => 'XML Pocket Reference'
Book.create :title => 'Understanding Linux Network Internals'
end
def self.down
drop_table :books
end
end
接着，使用 script.aculo.us and Prototype
包含到布局中去。
app/views/layouts/books.rhtml:
<html>
<head>
<title>Books</title>
<%= javascript_include_tag :defaults %>
</head>
<body>
<%= yield %>
</body>
</html
创建包含index and search 方法的控制器。 ｓｅａｒｃｈ方法对从ｉｎｄｅｘ视图发过来的ａｊａｘ调用做出响应。
app/controllers/books_controller.rb:
class BooksController < ApplicationController
def index
end
def get_results
if request.xhr?
if params['search_text'].strip.length > 0
terms = params['search_text'].split.collect do |word|
"%#{word.downcase}%"
end
@books = Book.find(
:all,
:conditions => [
( ["(LOWER(title) LIKE ?)"] * terms.size ).join(" AND "),
* terms.flatten
]
)
end
render :partial => "search"
else
redirect_to :action => "index"
end
end
end
index.rhtml 视图显示了查询字段，并使用observe_field 这一JavaScript 辅助方法在字段中定义一个观察者。
app/views/books/index.rhtml:
<h1>Books</h1>
Search: <input type="text" id="search_form" name="search" />
<img id="spinner" src="/images/indicator.gif" style="display: none;" />
<div id="results"></div>
<%= observe_field 'search_form',
:frequency => 0.5,
:update => 'results',
:url => { :controller => 'books', :action=> 'get_results' },
:with => "'search_text=' + escape(value)",
:loading => "document.getElementById('spinner').style.display='inline'",
:loaded => "document.getElementById('spinner').style.display='none'" %>
最后，创建一个局部模版， 将查询结果显示为一个书本标题列表。
app/views/books/_search.rhtml:
<% if @books %>
<ul>
<% for book in @books %>
<li>
<%= h(book.title) %>
</li>
<% end %>
</ul>
<% end %>[/color]
分享到：
相关推荐
在IT行业中，虚拟数据实现实时搜索是一种提升用户体验和数据处理效率的重要技术。它结合了前端和后端的先进技术，如PHP、jQuery和Ajax，来创建一个动态且响应迅速的搜索功能。以下是对这一主题的详细说明： 1. **...
使用PHP和Ajax实现实时搜索 一、 开发环境 1、环境搭建：Windows 7+Apache 2.4.18+MySQL 5.7.11+PHP 7.1.0。 2、文本编辑器：Sublime 3。 二、主要技术 本案例主要通过PHP读取XML文件，同时结合Ajax无刷新技术来实现...
在本文中，我们将探讨如何使用PHP和Ajax技术来实现实时搜索功能。实时搜索允许用户在输入关键词时，无需刷新页面即可获取相关结果，从而提供流畅的用户体验。以下是实现这一功能的主要步骤和相关知识点： 1. **开发...
- `oninput`事件：在输入框内容改变时即时触发，适合实现实时搜索功能。 - `onchange`事件：在元素失去焦点且内容发生变化时才触发，不适合实时搜索。 - `onkeydown/onkeypress/onkeyup`事件：这几个键盘事件可以...
用于实现允许用户输入一定字符后，显示一个下拉菜单，供用户从中选择，当用户选择某个选项后，按用户选择自动填写该文本框。 该组件继承EditText，所以它支持EditText组件提供的属性，同时，该组件该支持如下功能。...
带搜索功能的select下拉框，类似百度google的搜索框，自己匹配，很好用
1. 当select输入框中每输入一点内容的时候，在option中找出与内容匹配的选项显示在option的前面选项中。 2. 如何获取每次输入的内容，当keyup的时候触发函数。 问题：select标签中可以输入内容吗？...
本文将详细介绍如何利用EditText和PopupWindow来实现搜索功能，并结合TextWatcher监听器实现实时搜索。 首先，我们了解EditText。EditText是Android中的一个视图类，继承自TextView，用于接收用户输入的文本。它...
- **HotelSearchPriceCrawlService**：实现实时房价和房态的抓取。 服务之间通过HTTP或RPC进行通信，利用Nginx+QunarClient或Dubbo实现通信。此外，还采用了Zookeeper、ngx-healthcheck等工具来实现可用性和负载...
通过遍历所有`<option>`元素并检查它们的文本是否包含关键词，我们可以实现实时搜索。 然而，纯JS实现的下拉框可能在视觉效果上不尽人意。这时，可以引入jQuery下拉框美化插件，例如`select2`。`select2`不仅提供...
HideSeek插件的核心功能是实现实时搜索，这意味着用户在输入框中输入文字时，页面上的内容会即时根据输入进行过滤和高亮显示。这在大型数据集或者目录型网站中非常实用，因为它帮助用户快速找到他们想要的信息。高亮...
节流保证一段时间内只执行一次核心代码，防抖其实就是搜索功能的实现。。。。滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。同样的，如果不对函数调用的频率加以限制的话，那么...
* 实时搜索引擎：基于AJAX技术的搜索引擎可以实现实时搜索、自动完成等功能。 * 电子商务平台：基于AJAX技术的电子商务平台可以实现实时价格更新、库存查询等功能。 * 社交媒体：基于AJAX技术的社交媒体可以实现实时...
6. **优化用户体验**：为了提供更好的体验，你还可以实现`SearchView.OnQueryTextListener`，监听用户在搜索框中的输入，实现实时搜索建议： ```java searchView.setOnQueryTextListener(new SearchView....
一个简单、轻量级的 jQuery 插件，用于实现实时搜索。 要求： 简单使用 $ . liveSearch ( { selectorContainer : "ul" , selectorElementsToSearch : "li" , attributeToSearch : false , selectorInputSearch...
在“实时搜索引擎源码LUCENE”这个主题中，我们将深入探讨LUCENE如何实现实时搜索，并结合集群和负载均衡的实现方式。 1. **LUCENE实时搜索** LUCENE的核心特性之一就是支持实时搜索。这意味着当新的文档被添加到...
HideSeek插件正是基于jQuery库构建的，它的核心功能在于实现实时搜索。当用户在搜索框中输入关键词时，插件会立即对页面中的内容进行过滤，隐藏不匹配的结果，展示与搜索词相匹配的元素。这种实时反馈机制大大提高了...
百度搜索框的特点在于它不仅提供自动补全，还有实时搜索结果预览。在Winform中，可以监听`TextBox`的`TextChanged`事件，一旦用户输入内容发生变化，就发起一个异步请求（如使用`HttpClient`），获取搜索结果。这些...