Jquery Autocomplete上课提纲.docx

效果截图如下：

代码分析如下：

声明了一个autocomplete方法,源码分析如下：

//注册一个Jquery对象函数

$.fn.extend（{

/*函数名,注册完毕后可以被Jquery对象调用,两个参数

*参数1:

urlOrData:

名称我们可以看出可以接受一个url地址（远程数据）和data（本地数据）

*参数2:

options:

从源码可以看出是接受用来配置参数的JSON对象

*/

autocomplete:

function（urlOrData,options）{

//判断是数据还是URL地址（后面要分别处理）

varisUrl=typeofurlOrData=="string";

//如果传入了参数则替换自带的$.Autocompleter.defaults相同的缺省参数.

options=$.extend（{},$.Autocompleter.defaults,{

//如果传入的是地址,则把地址赋值给url变量

url:

isUrl?

urlOrData:

null,

//如果传入的是数据,则把数据赋值给data变量

data:

isUrl?

null:

urlOrData,

//根据不同的数据类型设置延时参数

delay:

isUrl?

$.Autocompleter.defaults.delay:

10,

/*

*options.scroll:

结果大于默认高时,是否支持滚动条true

*max:

设置下拉列表显示的项目数

*必须要先判断:

options否则options.scroll可能null异常

*如果options.scroll为true则三目结果为false返回150：

支持滚动条下面显示150个值

*如果options.scroll为false则三目结果为true返回10：

不支持滚动条下面显示10个值

*一般我们会自己设置max,覆盖系统值

*/

max:

options&&!

options.scroll?

10:

150

},options）;

Autocomplete缺省属性如下:

$.Autocompleter.defaults={

inputClass:

"ac_input",

resultsClass:

"ac_results",

loadingClass:

"ac_loading",

minChars:

1,

delay:

400,

matchCase:

false,

matchSubset:

true,

matchContains:

false,

cacheLength:

10,

max:

100,

mustMatch:

false,

extraParams:

{},

selectFirst:

true,

formatItem:

function（row）{returnrow[0];},

formatMatch:

null,

autoFill:

false,

//省略了若干代码

};

常见参数配置

$（function（）{

vardata="JAVAJSPJ2EEJ2SENETCC++".split（""）;

//添加基本配置

$（'#keyword'）.autocomplete（data,{

max:

3,//列表里的最大匹配条目数

minChars:

1,//自动完成激活之前填入的最小字符,0为双击或者删除的时候可以显示

width:

300,//提示的宽度，溢出隐藏,默认与文本框同宽

scrollHeight:

60,//提示的高度，溢出显示滚动条,默认与文本框同高,建议设置一个固定值

matchContains:

true//包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示

}）;

}）;

JSON相关概念回顾:

JSON介绍

1.JSON指的是JavaScript对象表示法（JavaScriptObjectNotation）

2.JSON是轻量级的文本数据交换格式

3.JSON独立于语言

4.JSON具有自我描述性，更易理解

5.JSON易于机器解析和生成，并且易于书写和阅读

6.JSON使用JavaScript语法来描述数据对象，但是JSON跟XML一样独立于语言和平台。

JSON与XML比较：

1.JSON是纯文本

2.JSON具有“自我描述性”（人类可读）

3.JSON可通过JavaScript进行解析JS无缝集成

4.没有标签

5.更短、读写的速度更快

JSON格式组成（）[]{}<>

1.JSON只有两种结构：

对象和数组,由这两种结构嵌套和组合来表示各式各样的数据。

2.数据对象由一系列的属性/值对来表示

3.数据对象和属性/值对由逗号分隔

4.花括号保存对象

5.方括号保存数组

Autocomplete接受JSON格式

$（function（）{

varemails=[

{name:

"PeterPan",to:

"peter@pan.de"},

{name:

"Molly",to:

"molly@"},

{name:

"ForneriaMarconi",to:

"live@japan.jp"},

{name:

"MasterSync",to:

"205bw@"},

{name:

"Dr.TechdeLog",to:

"g15@"},

{name:

"DonCorleone",to:

"don@"},

{name:

"McChick",to:

"info@donalds.org"},

{name:

"DonnieDarko",to:

"dd@timeshift.info"},

{name:

"QuakeTheNet",to:

"webmaster@quakenet.org"},

{name:

"Dr.Write",to:

"write@"},

{name:

"GGBond",to:

"Bond@"},

{name:

"ZhuzhuXia",to:

"zhuzhu@"}

];

//基本配置,据格式化

$（'#keyword'）.autocomplete（emails,{

max:

3,//列表里的最大匹配条目数

minChars:

1,//自动完成激活之前填入的最小字符

width:

600,//提示的宽度，溢出隐藏

scrollHeight:

80,//提示的高度，溢出显示滚动条,默认与文本框同宽

matchContains:

true,//包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示

/*

formatItem（Function）:

为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,

返回值将用LI元素包含显示在下拉列表中.

Autocompleter会提供三个参数（row,i,max）:

返回的结果数组,

当前处理的行数（即第几个项目,是从1开始的自然数）,

当前结果数组元素的个数即项目的个数.Default:

none,

表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.

formatResult（Function）:

formatItem类似,但可以将将要输入到input文本框内的值进行格式化.

同样有三个参数,和formatItem一样.Default:

none,

表示要么是只有数据,要么是使用formatItem提供的值.

*/

formatItem:

function（row,i,max）{

returni+'/'+max+':

"'+row.name+'"['+row.to+']';

},

//formatResult:

formatItem类似,但可以将将要输入到input文本框内的值进行格式化

formatResult:

function（row）{

returnrow.to;

}

}）;

}）;

接受远程的字符串数据

Parse源码分析

字符串通过后台传送到前台会自动调用框架的parse方法,进行解析转化框架:

functionparse（data）{

//创建了一个null数组

varparsed=[];

//通过\n分割符,把字符串转化为数组,如果没有则不拆分任何内容

varrows=data.split（"\n"）;

for（vari=0;i

//拿到数组的每个成员,截取先后空格

varrow=$.trim（rows[i]）;

//如果有内容,则为true

if（row）{

//对每一个数组成员进一步拆分

row=row.split（"|"）;

//parsed[0]parsed[1]

parsed[parsed.length]={

//data:

默认把数据交给formatItem处理,返回的结果,作为下拉列表框的值

data:

row,

value:

row[0],

//result:

把数据交给formatResult处理,返回的结果,作为用户选中的格式

result:

options.formatResult&&options.formatResult（row,row[0]）||row[0]

//result:

row[0]也可以不要调用自己手动处理

};

}

}

//返回数组,前台负责显示数据即可

returnparsed;

};

Action返回数据如下：

publicvoid）throwsException{

//根据autocomplete源码中的parse（）得传输的数据格式应该为:

Stringdata="IPhone|100\nIPad|800\napplie|1000";

ServletActionContext.getResponse（）.getWriter（）.write（data）;

}

接受远程JSON数据

系统自带的parse方法,决定了自能接收远程的字符串数据,然后通过字符数据进行拆分,这种方式可读性不是很强,最好的方式后台传送的是JSON格式,然后我们根据具体的JSON格式重写parse方法即可

页面代码如下：

$（function（）{

//基本配置,访问远程数据,不与Struts整合的方式,可以配置delay设置激活查询时间的时间

$（'#keyword'）.autocomplete（"/autocomplete/autoAction_json1.action",{

max:

3,//列表里的最大匹配条目数

minChars:

1,//自动完成激活之前填入的最小字符

width:

600,//提示的宽度，溢出隐藏

scrollHeight:

80,//提示的高度，溢出显示滚动条,默认与文本框同宽

delay:

1000,//击键后激活autoComplete的延迟时间（单位毫秒）.Default:

远程为400本地10

matchContains:

true,//包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示

autoFill:

true,//自动填充,如果为trueminChars要配置为0（双击后会显示所有提示）

//formatItem:

用来格式化下拉列表项,row代表数据,i:

编号max:

总数量

formatItem:

function（row,i,max）{

returnrow.word+'

right">约有'+row.num+'条结果