实例
-
-
自动提示文本
（
jQuery
的
ajax
访问
）
1.1
效果展示
用户希望尽量减少在网页上填写表单的任务量，尤其是使用键盘输入的内容。为了尽可能地
方便用户，提供良好的自动提示功能成为网站上必备的功能。
本章以填写颜色为例，为用户提供自动
提示，展示该效果的制作方法。运行效果如下：
1.2
jQuery
版本
1.2.1
HTML
框架
自动提示文本框首先具备“文本框”，供用户输入使用。
提示框采用
<div>
块内嵌项目列表
<ul>
实现。
当用户在文本框中每输入一个字符，触发“
keyup
”事件。这时，在预定的“颜色名称集合”
中进行查找，将找到的匹配项加载到
<ul>
中，显示给用户选择。
HTML
的框架如下：
<form method="post" name="myForm1">
Color: <input type="text" name="colors"
id="colors" />
</form>
<div id="popup">
<ul
id="colors_ul"></ul>
</div>
因为
<div>
必须出现在输入框的下面，因此采取
CSS
绝对定位，样式设计如下：
@charset "utf
-
8";
body{
font
-
family:Arial, Helvetica, sans
-
serif;
font
-
size:12px; padding:0px; margin:5px;
}
1
form{padding:0px; margin:0px;}
input{
/*
用户输入框的样式
*/
font
-
family:Arial, Helvetica, sans
-
serif;
font
-
size:12px;
border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/*
提示框
div
块的样式
*/
position:absolute; width:202px;
color:#004a7e; font
-
size:12px;
font
-
family:Arial, Helvetica, sans
-
serif;
left:41px; top:25px;
}
#popup.show{
/*
显示提示框的边框
*/
bo
rder:1px solid #004a7e;
}
#popup.hide{
/*
隐藏提示框的边框
*/
border:none;
}
/*
提示框的样式风格
*/
ul{
list
-
style:none;
margin:0px; padding:0px;
}
li.mouseOver{
background
-
color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background
-
color:#FFFFFF;
color:#004a7e;
}
2
1.2.2
自动提示
的实现
1
、
预定颜色集
数据的存储
本版本将预定颜色集以字符串数组的形式存储在客户端。
var aColors =
["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","
azure","brown","bronze","deeppink","aliceblue","gray","copper","coral" , ......
,"darkcyan","darkgree
n","darkhaki","ivory","darkmagenta","cornfloewrblue"];
为了提高查找效率，查找前将字符串数组
按字母
序
排序，
同时
使显示结果更
为
友好
。
aColors.sort();
2
、
颜色
匹配过程
当用户在文本框中输入任意一个字符时，在数组中进行匹配搜索。如果找到匹配项
（
从第一
个字符开始匹配，可能存在多个匹配项
）
则将其存储在一个
结果
数组中。
var sInput = $("#colors").val();
var
aResult
=new Array();
aColors.sort();
$(aColors).each(function(){
//
从颜色表中找匹配的颜色
if(this.indexOf(sInput)==0){
//
必须是从单词的开始处匹配
aResult.push(this);
//
压入结果
}
})
3
、
显示提示框
显示过程包括两部分操作：一是
提示框
的
出现
；二是
将查找到的匹配颜色数组
(aResult )
项添
加到
ul
中
。
//
显示提示框
$("#popup").addClass(
"show");
//
处理
UL
var sUlChildren="";
$(aResult).each(function(){
//
将匹配的提示结果逐一显示给用户
sUlChildren += "<li>"+this+"</li>";
})
$("#colors_ul").append(sUlChildren);
3
4
、
清除
提示框
清除提示框
同样包括两部分操作，相当于是显示提示框的逆操作，包括：清除
将
ul
中所有
li
；
令
提示框消失
。
$("#colors_ul").empty();
$("#popup").
removeClass("show");
5
、
提示框中的
li
事件
设置在
提示框中的每个
li
上
鼠标移入时高亮显示
，
鼠标移出时去掉高亮
，
鼠标单击时，将
li
信息
添加到文本框
中。
$("#colors_ul").find("li").click(function(){
$("#colors").val($(this).text());
clearColors();
}).hover(
function(){
$(this).addClass("mouseOver");
},
function(){
$(this).removeClass("mouseOver");
}
);
6
、
代码汇总
$(function(){
//
按键的响应：输入的字符
+del
（空）
$("#colors").keyup(function(){
//
按键抬起时
autoMath();
})
})
//
进行匹配
function autoMath(){
if($("#colors").val().length>0){
//
有字符存在的情况：进行匹配
//1.
在数组
aColors
中查找（以当前文本框中的字符开头），把结果存放在数组中
aResult[]
4
//1.1
创建
aResult[]
//1.2
提高效率：对
aColors[]
数组排序
( sort() )
//1.3
查找：对
aColors[]
进行遍历，并比较（
indexOf("")==0
）
var sInput = $("#colors").val();
var
aResult=new Array();
aColors.sort();
$(aColors).each(function(){
if(this.indexOf(sInput)==0){
aResult.push(this);
}
})
if(aResult.length>0){ //
找到匹配的元素
showColors(aResult);
}else{ //
没有匹配的元素
clear();
}
}else{//
按下
del
之后，文本框被清空
clear();
}
}
function clear(){
//
清空
//1.div
消失
//2.ul
内容被
清空
$("#popup").removeClass("show");
$("#colors_ul").empty();
}
function showColors(aResult){
//
清除
clear();
5
//2.
显示
//2.1 div
出现
//2.2
将
aResult
数组中元素填入
ul(
生成
li):
遍历，每一个
-
>
创建
li
（
<li>aResult[i]</li>
），
加入到
ul
（
append
：创建
&
添加）
$("#popup").addClass("show");
var sUlChildren="";
$(aResult).each(function(){
sUlChildren += "<li>"+this+"</li>";
})
$("#colors_ul").append(sUlChildren);
//3.
鼠标移入移出
click
的效果
: li:mouseover+mouseout+click
--
>
//3.1
移入：添加当前样式
//3.2
移出：删除当前样式
//3.3 click
：把当前
li
的值送给文本框
/*
$("#co
lors_ul li").mouseover(function(){
$(this).addClass("mouseOver");
})
$("#colors_ul li").mouseout(function(){
$(this).removeClass("mouseOver");
})*/
$("#colors_ul li").hover(//mouseover,mouseout
的效果
function(){
$(this).addClass("mouseOver"
);
},
function(){
$(this).removeClass("mouseOver");
6
}
).click(function(){
$("#colors").val($(this).text());
clear();
})
}
1.3
jQuery
+Ajax
版本
对于
庞大的
存储在客户端，
无疑每次下载到客户端是不可想象的负担。
在实际设计中，都是
通过与服务器的异步式交互完成的，即使用
Ajax
技术，
将
“
预存颜色集
”
存储在服务器端。
1.3.1
服务器端处理
本例客户端采用
JSP
技术完成
，代码如下：
<%
String sInput=request.getParameter("sColor").trim();
//
获取客户端提交的输入信息
if(sInput.length()==0)
return;
String sResult="";
String[] aColors = {"red","green......"darkgreen","cornfloewrblue"};
//
服务器端存储的颜色集
for(int i=0; i<aColors.length; i++){
if(aC
olors[i].indexOf(sInput)==0){
sResult+=aColors[i]+",";
//
将匹配结果拼接为一个字符串，每个颜色之间用逗号分隔
}
}
if(sResult.length()>0){
sResult=sResult.substring(0,sResult.length()
-
1); //
去掉最后的逗号
}
out.print(sResult);
//
将匹配结果返回至客户端
%>
1.3.2
jQuery
中的
Ajax
请求
在
jQuery
中，可以使用
3
个函数完成
Ajax
请求：
1
、
$.get(url, [data], [callback])
其中
：
7
url
：
要求为
String
类型的参数，
为
异步请求地址
（
默认为当前页地址）
；
data
为
向服务器传送的
参数
数据
：
get
请求中将附加在
url
后
，
data
必须为
key/value
的
JSON
格式，例如
{foo1:"bar1",foo2:"bar2"}
转换为
&foo1=bar1&foo2=bar2
。
callback
()
为
Ajax
加载成功后运行的函数
，
callback
()
函数的
参数
1
是
服务器返回的数据
，
参数
2
是关于
服务器的状态
信息。
2
、
$.p
ost(url, [data], [cal
lback], [type])
前
3
个参数与
$.get()
相同，第
4
个参数
type
为
请求数据的类型：
HTML
，
XML
，
JSON
等
。
3
、
$.ajax(options)
$.ajax(options)
可以设置
Ajax
访问服务器的各个细节，语法非常简单，就是设置
Ajax
的各个
选项，然后指定相应的值。常用参数如下：
url:
同上
。
type:
要求为
String
类型的参数，请求方式（
post
或
get
）默认为
get
。
data:
同上
dataType:
要求为
String
类型的参数，预期服务器返回的数据类型。如果不指定，
jQuery
将自
动根据
http
包
mime
信息返回
responseXML
或
responseText
，并作为回调函数参数传递。
可用的类型如下：
text
：返回纯文本字符串。
xml
：返回
XML
文档，可用
jQuery
处理。
json
：返回
JSON
数据。
html
：返回纯文本
HTML
信息；包含的
script
标签会在插入
DOM
时执行。
script
：返回纯文本
JavaScript
代码。不会自动缓存结果。除非设置了
cache
参数。
success
：要求为
f
unction
类型的参数，请求成功后调用的回调函数，有两个参数。
(1)
由服务器返回，并根据
dataType
参数进行处理后的数据。
(2)
描述状态的字符串。
function(data, textStatus){
//data
可能是
xmlDoc
、
jsonObj
、
html
、
text
等等
}
error
：要求为
f
unction
类型的参数，请求失败时被调用的函数。该函数有
3
个参数，即
XMLHttpRequest
对象、错误信息、捕获的错误对象
(
可选
)
。
8
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
