- 浏览: 2107043 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
无心流泪wan:
private static final Log log = ...
log4j Category.callAppenders Block -
yjxa901:
博主好: http://www.java.net/down ...
jdk debug -
aptech406328627:
大神,请接收我的膜拜吧,纠结了两天的问题,就这么让你给解决了 ...
java.lang.reflect.MalformedParameterizedTypeException -
xukunddp:
谢谢1楼,我也遇到,搞定了
java.lang.reflect.MalformedParameterizedTypeException -
di1984HIT:
学习了!!!!
jvmstat hsperfdata java.io.tmpdir
为了实现一个花哨的自动搜索补全功能,故需要写js了,以前使用YUI的,现在希望找个轻量级的了,找到了jquery,go了很久才找到了我想要的,故在此记录下。
官方地址 :http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
转自:http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html
jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大,我们就来写一些代码感受一下。
jquery-autocomplete配置:
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
首先是一个最简单的Autocomplete(自动完成)代码片段:
2 < head runat ="server" >
3 < title > AutoComplate </ title >
4 < script type ="text/javascript" src ="/js/jquery-1.4.2.min.js" ></ script >
5 < script type ="text/javascript" src ="/js/jquery.autocomplete.min.js" ></ script >
6 < link rel ="Stylesheet" href ="/js/jquery.autocomplete.css" />
7 < script type ="text/javascript" >
8 $( function () {
9 var data = " Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities " .split( " " );
10
11 $( ' #keyword ' ).autocomplete(data).result( function (event, data, formatted) {
12 alert(data);
13 });
14 });
15 </ script >
16 </ head >
17 < body >
18 < form id ="form1" runat ="server" >
19 < div >
20 < input id ="keyword" />
21 < input id ="getValue" value ="GetValue" type ="button" />
22 </ div >
23 </ form >
24 </ body >
25 </ html >
result方法是jQuery Autocomplete插件里的重要方法,它在用户在选定了某个条目时触发。data参数为选中的数据。
一个稍微复杂的例子,可以自定义提示列表:
2 < head runat ="server" >
3 < title > 自定义提示 </ title >
4 < script type ="text/javascript" src ="/js/jquery-1.4.2.min.js" ></ script >
5 < script type ="text/javascript" src ="/js/jquery.autocomplete.min.js" ></ script >
6 < link rel ="Stylesheet" href ="/js/jquery.autocomplete.css" />
7 < script type ="text/javascript" >
8 var emails = [
9 { name: " Peter Pan " , to: " peter@pan.de " },
10 { name: " Molly " , to: " molly@yahoo.com " },
11 { name: " Forneria Marconi " , to: " live@japan.jp " },
12 { name: " Master <em>Sync</em> " , to: " 205bw@samsung.com " },
13 { name: " Dr. <strong>Tech</strong> de Log " , to: " g15@logitech.com " },
14 { name: " Don Corleone " , to: " don@vegas.com " },
15 { name: " Mc Chick " , to: " info@donalds.org " },
16 { name: " Donnie Darko " , to: " dd@timeshift.info " },
17 { name: " Quake The Net " , to: " webmaster@quakenet.org " },
18 { name: " Dr. Write " , to: " write@writable.com " },
19 { name: " GG Bond " , to: " Bond@qq.com " },
20 { name: " Zhuzhu Xia " , to: " zhuzhu@qq.com " }
21 ];
22
23 $( function () {
24 $( ' #keyword ' ).autocomplete(emails, {
25 max: 12 , // 列表里的条目数
26 minChars: 0 , // 自动完成激活之前填入的最小字符
27 width: 400 , // 提示的宽度,溢出隐藏
28 scrollHeight: 300 , // 提示的高度,溢出显示滚动条
29 matchContains: true , // 包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
30 autoFill: false , // 自动填充
31 formatItem: function (row, i, max) {
32 return i + ' / ' + max + ' :" ' + row.name + ' "[ ' + row.to + ' ] ' ;
33 },
34 formatMatch: function (row, i, max) {
35 return row.name + row.to;
36 },
37 formatResult: function (row) {
38 return row.to;
39 }
40 }).result( function (event, row, formatted) {
41 alert(row.to);
42 });
43 });
44 </ script >
45 </ head >
46 < body >
47 < form id ="form1" runat ="server" >
48 < div >
49 < input id ="keyword" />
50 < input id ="getValue" value ="GetValue" type ="button" />
51 </ div >
52 </ form >
53 </ body >
54 </ html >
formatItem、formatMatch、formatResult是自定提示信息的关键。
formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体。
formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,
formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。
附加:http://www.jb51.net/article/22647.htm
发表评论
-
常用js组件
2013-10-01 10:08 1130支持语法高亮的代码编辑器 https://github. ... -
json序列化对比
2012-08-02 11:35 1620项目中需要json数据,所以需要找性能最好的json序列化库。 ... -
Javascript 跨域总结
2012-05-04 10:32 847同事问了个关于二级域名是否跨域的,结果想当然的以为同一个主域名 ... -
js在线格式化网站
2012-02-14 18:29 1368经常遇到各种紧密的json格式串,为了好看点希望有个格式化工 ... -
jquery 无限级联下拉框
2011-12-31 23:10 3551有的时候需要某个东西,然后又得不到资源来帮助你,只能自己动手丰 ... -
javascript 在线编辑器
2011-09-12 21:36 6609偶尔需要模拟一下页面操作,希望有个在线的javascript编 ... -
EXT学习资料
2009-03-11 15:29 1121之前用过YUI 但是害怕CSS 知道EXT不需要写太多的CSS ... -
javascript中MVC模式开发
2007-11-26 20:20 4581MVC这个概念本不首先在软件工程这个领域提出, ... -
读<<AJAX HACK>>有感
2007-11-26 15:17 1285最近有幸拜读了<<AJA ... -
验证Email格式的好例子
2007-11-26 15:16 2324遇到过很多应用要验证Email的格式,看过TOMCAT和JAV ... -
动态添加和删除表单元素
2007-11-26 14:43 1878xml 代码 也许是遇到的问题都是这样的,因此我 ... -
javascript中基于类的继承
2007-11-26 13:59 1136xml 代码 在两个对象之间创建一个继承关系可以 ... -
javascript私有属性和信息隐藏
2007-11-26 13:58 2145xml 代码 私有属性在构造函数中用var关键字 ... -
prototype实现继承
2007-11-26 13:55 1140xml 代码 假设有类VEHICLE,另有2个类 ... -
利用js获得网页路径
2007-11-26 13:48 1833xml 代码 <script lang ... -
js中获得网页源代码
2007-11-26 13:46 2273xml 代码 '0000000.html'为你要 ... -
一个简单的AJAX例子
2007-11-26 13:40 1726xml 代码 <!DOCTYPE html ... -
动态创建TABLE
2007-11-26 12:56 3753才学AJAX就被他创建动态TABLE搞 ...
相关推荐
要使用 AutoComplete,首先选择一个输入框元素,然后调用 `autocomplete()` 方法。这里是一个简单的例子: ```html $( function() { $( "#searchBox" ).autocomplete({ source: [ "Apple", "Banana", "Cherry...
**jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全功能,能够极大地提升用户体验。这个插件基于 jQuery 库,因此需要先引入 jQuery 才能使用。在本文...
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...
在提供的“autocomplete 范例”中,可能包含了一个演示如何使用 `jQuery autoComplete` 的实例。这个例子可能包括 HTML 结构、CSS 样式和 JavaScript 代码,展示了如何实现根据输入的表名和字段名实时获取提示信息的...
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
这个实例将展示如何使用 jQuery 和 Autocomplete 插件来实现这一效果。 首先,我们需要引入 jQuery 库和 Autocomplete 插件。通常,我们会从 jQuery 官方网站下载最新版本的 jQuery.js 文件,然后将它放在 HTML ...
5. **基本使用方法**: 要使用jQuery Autocomplete,首先需要引入jQuery和jQuery UI库。然后,选择需要添加此功能的输入框元素,并调用`.autocomplete()`方法,传入配置对象,如数据源(`source`)、触发补全的最小...
3. **JavaScript代码**: 使用jQuery的`autocomplete`方法,配置数据源和回调函数。这里通常涉及Ajax请求以获取匹配的建议: ```javascript $(function() { $("#searchBox").autocomplete({ source: function...
通过以上步骤,你就可以创建一个基本的jQuery autocomplete实例。`autocomplete2`可能包含更复杂或定制化的实现,例如包含多个数据源、自定义模板等。进一步探索这个文件,你可以学习到更多关于jQuery与Ajax结合实现...
<title>jQuery AutoComplete 实例 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> ...
下面我们将深入探讨JQuery AutoComplete的使用方法及其核心功能。 首先,为了使用JQuery AutoComplete,你需要在HTML文档中引入以下资源: 1. 引入jQuery库:`<script type="text/javascript" src="/js/jquery-...
这个资源包包含了丰富的信息和实例,可以帮助开发者更深入地理解和应用jQuery Autocomplete插件。 **1. 插件介绍** jQuery Autocomplete是jQuery UI框架的一部分,它允许在输入框中实现自动填充功能,通常用于搜索...
jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...
提供的帮助文档将详细介绍如何配置和使用jQuery Autocomplete插件,包括所有可用的选项、方法和事件。通过Demo,你可以直观地看到插件在实际场景中的应用,有助于理解和学习。Demo中通常包含了各种常见用法和复杂...
总的来说,这个资源包提供了一个关于如何利用jQuery实现Google Suggest样式的自动完成功能的教程或实例。开发者可以通过学习和实践,提升自己在前端交互设计方面的能力,为网站或应用增加高效、友好的用户体验。同时...
$("#"+txtBelongProvince).autocomplete(data,{ minChars: 0, max:data.length, matchCase:false,//不区分大小写 multiple: true, //允许多选 multipleSeparator:';',//多选分隔符 formatItem: function(row, ...
**jQuery Autocomplete 实例详解** `jQuery UI` 的 `Autocomplete` 是一个强大的功能,它为输入框提供了自动补全的功能,广泛应用于各种 Web 应用中,如搜索引擎、表单填充等。这个实例将深入讲解如何在项目中有效...
以下是`jQuery.autocomplete.js`的核心功能和使用方法: 1. **数据源**:自动补全的数据可以从多种来源获取,包括静态数组、服务器端API或者AJAX请求。例如,你可以定义一个包含多个选项的JavaScript数组,然后将该...
《jQuery Autocomplete 实例详解与应用拓展》 在Web开发中,jQuery库因其简洁的API和强大的功能,深受开发者喜爱。而jQuery UI中的Autocomplete组件则为用户输入提供了智能化的建议,极大地提升了用户体验。本篇...
3. **初始化插件**:使用jQuery选择器找到该元素,并调用`autocomplete()`方法进行初始化,设置必要的选项。 ```javascript $(function() { $("#autocomplete-input").autocomplete({ source: function(request,...