1,jQueryAutoComplete
http://rorplugin.googlecode.com/svn/trunk/jquery_auto_complete/
jQueryAutoComplete is a jQuery-based Ruby on Rails AutoComplete plugin.
jQueryAutoComplete lets you push a JavaScript Array to the front page for auto-completion to use.
jQueryAutoComplete's style is easy to modify, please refer to public/stylesheets/jquery.autocomplete.css
============
Usage:
======================
books_controller.rb:
--------
def books_for_lookup
@books = Book.find(:all)
@headers['content-type'] = 'text/javascript'
render :layout => false
end
======================
books_for_lookup.rhtml:
--------
var books = [];
<% @books.each do |book|%>
books.push("<%= book.name %>");
<% end %>
======================
books.rhtml:
--------
<head>
<%= auto_complete_include "/books_for_lookup" %>
</head>
======================
search.rhtml:
--------
<div id="content">
<p>
<label>Books:</label>
<input type="text" id="suggest1" />
</p>
</div>
<%= auto_complete("suggest1", "books") %>
------------------
2,PrototypeAutoComplete
http://rorplugin.googlecode.com/svn/trunk/prototype_auto_complete/
PrototypeAutoComplete is a Prototype-based Ruby on Rails AutoComplete plugin.
PrototypeAutoComplete lets you push a JavaScript Array to the front page for auto-completion to use.
PrototypeAutoComplete's style is easy to modify, please refer to public/stylesheets/prototype.autocomplete.css
============
Usage:
======================
books_controller.rb:
--------
def books_for_lookup
@books = Book.find(:all)
@headers['content-type'] = 'text/javascript'
render :layout => false
end
======================
books_for_lookup.rhtml:
--------
var books = [];
<% @books.each do |book|%>
books.push("<%= book.name %>");
<% end %>
======================
books.rhtml:
--------
<head>
<%= auto_complete_include "/books_for_lookup" %>
</head>
======================
search.rhtml:
--------
<div id="content">
<p>
<label>Books:</label>
<input type="text" id="suggest1" />
</p>
</div>
<%= auto_complete("suggest1", "books") %>
------------------
Screenshot:
- 描述: Screenshot
- 大小: 16.5 KB
分享到：
相关推荐
- **函数**：当数据源需要动态获取时，可以提供一个函数，该函数接收两个参数，一个是当前输入的值，另一个是回调函数，用于返回匹配的建议项。 - **URL**：通过`ajax`方式从服务器获取数据，需设置`dataType`（如...
5. `jquery.combobox.js` 和 `jquery.combobox.min.js`：这两个文件都是Autocomplete插件的实现，`.min.js`是压缩后的版本，适用于生产环境，以减少页面加载时间。 6. `jquery.bgiframe.pack.js`：这个插件用于解决...
minLength: 2 // 用户输入至少两个字符后开始搜索 }); }); ``` 在上面的代码中，`source`属性定义了数据来源。我们使用了一个Ajax请求，向服务器发送请求获取匹配的建议。假设我们有一个名为`AutoCompleteService...
虽然jQuery UI库中也有一个Autocomplete组件，但这里我们讨论的是一个独立且简单的jQuery Autocomplete插件。 **1. 安装与引入** 要使用这个插件，首先需要确保你的项目中已经引入了jQuery库。然后，你可以通过CDN...
以下示例展示了如何根据`label`和`description`两个字段进行匹配： ```javascript $( function() { $( "#searchInput" ).autocomplete({ source: function(request, response) { // 异步获取数据 $.ajax({ // ...
"源码"和"工具"这两个标签暗示了这个插件不仅是一个现成的解决方案，还可能包含了可查看和修改的源代码，使得开发者可以根据自己的需求进行定制。"工具"则表明它是一个实用程序，有助于提高开发效率，简化前端输入...
首先，我们需要引入jQuery库和jQuery UI库，这两个库是使用Autocomplete插件的基础。在HTML文件中，确保引入了以下两个链接： ```html <script src="https://code.jquery.com/jquery.js"></script> ...
本资源包含两个重要的插件：Cscope和Autocomplete，它们极大地提升了Emacs在代码导航和自动补全方面的效率。 Cscope是一款源码浏览工具，它允许程序员快速查找和理解大型项目中的代码结构。在Emacs中集成Cscope，...
在压缩包文件中，"autoComplete"和"P56_AutoComplete"可能包含的是这两个例子的源代码或者相关教程资源。通过分析和学习这些示例，读者可以更好地理解Eclipse中的自动完成机制，并将其应用到自己的开发实践中，提升...
在本压缩包中，我们有两个文件：`jquery.autocomplete.js` 和 `jquery.autocomplete.css`，它们分别负责插件的核心功能和样式定义。将这两个文件放入你的项目目录，并在页面中通过 `<script>` 和 `<link>` 标签引入...
minLength: 2, // 用户至少输入两个字符才开始提示 delay: 300, // 延迟多久后发送请求 select: function(event, ui) { // 用户选择建议项后的回调 // 你可以在这里处理选中的值 } }); }); ``` ### 自定义...
接下来，我们将详细介绍两种使用AutoComplete插件的方法： 1. **直接使用构造的JSON数据** 在这个方法中，你可以预先定义一个JSON数组，包含了要提示的数据。例如，你可以创建如下的数据结构： ```javascript var...
minLength: 2, // 用户至少输入两个字符后触发 delay: 300, // 延迟发送请求的时间，单位为毫秒 select: function(event, ui) { // 用户选择一个建议项时的回调 console.log(ui.item.value); } }); ``` ### 5....
《jQuery Autocomplete插件详解与应用实践》 在Web开发中，提高用户体验是至关重要的，而自动完成（Autocomplete）功能则是实现这一目标的有效手段之一。jQuery库中的Autocomplete插件，通过简单易用的API，帮助...
《基于jQuery的Autocomplete插件实现与应用》 在Web开发中，为了提高用户体验，我们经常需要使用到自动完成（Autocomplete）功能。这通常在用户输入时提供预测建议，帮助用户快速找到所需内容。本篇文章将深入探讨...
回调函数接受两个参数，一个是请求对象，另一个是响应函数，我们可以在这个函数中异步获取数据并调用响应函数传递给Autocomplete。 ```javascript $("#searchBox").autocomplete({ source: function(request, ...
综上，"jQuery-Autocomplete-master"压缩包提供的实例，不仅展示了如何使用jQuery Autocomplete插件实现自动补全功能，还涵盖了本地和远程数据源的处理，对于前端开发者来说，这是一个很好的学习和实践资源。
主要修改了两个关键点： 1. 上下选择与输入值同步问题： 原始插件可能存在一个问题，即当用户输入关键词后，下拉列表出现相关选项，使用键盘的上、下箭头键选择某一项时，输入框的值并未实时更新为所选选项的值。...
在ASP.NET环境中实现这个功能，我们需要创建一个Web应用程序，包括前端和后端两部分。前端主要负责与用户交互，利用jQuery Autocomplete插件处理输入和显示建议。后端则需要处理来自前端的请求，查询数据库并返回...
在这个场景中，我们有两个关键文件：`jquery.autocomplete.css` 和 `jquery.autocomplete.min.js`。 1. **`jquery.autocomplete.css`**： 这个文件是 CSS 样式表，负责定义 `jQuery.autocomplete` 插件的外观和...