基于AJAX的自动完成

我想大家在访问某些网站的时候都曾见到过基于Ajax的自动完成功能,比如http://www.google.com,www.56.com/.

一、引出Ajax的自动完成
     现在要实现一个员工信息查询的功能，即根据输入的名字检索员工的详细信息。这是一个简单的数据表查询，在ASP.NET中实现这样的功能是比较简单的.
      从上面可以看出,这种员工信息查询功能还存在一些不足，比如用户可能记不全员工的名字，只记得前面几个字母是什么，这样用户只能根据记忆猜测，一遍遍地尝试。如果在用户输入的同时，输入框下方可以给出相应的提示，辅助用户输入，那么用户进行检索的速度和成功率就会大大提高.这就是基于Ajax的自动完成功能.

二、自动完成功能的实现
实现这样的功能需要按以下的步骤进行。
·服务器端提供GetSearchItems方法给客户端，用来返回满足条件的员工列表。·客户端的输入框需要增加onkeydown响应函数，以便即时获取满足条件的员工列表。·通过客户端的JavaScript动态列出待选结果的列表，同时还要提供键盘和鼠标的响应。
三、服务器端实现
本文采用AjaxPro.NET作为Ajax开发框架，首先为使用AjaxPro.NET做一些准备工作。添加对AjaxPro.dll的引用，修改Web.config配置文件，在system.web节点下加入如下配置：

<httpHandlers>2

3

<addverb="POST,GET"path="ajaxpro/*.ashx"type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>4

</httpHandlers>

在页面后台代码（Default.aspx.cs）的Page_Load方法中增加下面的代码：

protectedvoidPage_Load(objectsender, EventArgs e)2

AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));4

}

下面定义提供给客户端调用的方法GetSearchItems(),参数query为模糊查询的关键字值：

[AjaxPro.AjaxMethod()]2

publicArrayList GetSearchItems(stringquery)3

ArrayList items=newArrayList();5

StringBuilder queryString=newStringBuilder();6

queryString.Append("select employeeid,lastname,firstname,title,titleofcourtesy from dbo.Employees");7

queryString.Append("where firstname like '%"+query+"%'");8

DataSet ds=DataBase.Instance.ReturnDataSet(queryString.ToString());10

for(inti=0; i<ds.Tables[0].Rows.Count; i++)11

{12

items.Add(ds.Tables[0].Rows[i][2].ToString());13

}14

returnitems;15

}

GetSearchItems方法返回一个ArrayList对象，它将包含所有以用户输入字符串的员工名字。
四、客户端实现
相对于服务器端的方法而言，客户端的处理要复杂得多。首先来分析如何根据服务器端返回的ArrayList对象展示结果。这里用到了Web编程中“层”（div）的概念，通过JavaScript和DOM创建一个新的层div，将ArrayList中的每一个条目都作为其子节点加入到div中，而每一个条目也被看作是一个div，其中具体的文本内容则是一个span对象。除了显示待选的结果之外，下拉区域还要对键盘、鼠标事件做出响应；为了实时地显示待选结果，还需要定时更新待选结果的列表。这些功能都封装在lookup.js中。下面是lookeu.js的定义：

//下拉区背景色2

varDIV_BG_COLOR="#EEE";3

//高亮显示条目颜色4

varDIV_HIGHLIGHT_COLOR="#C30";5

//字体6

varDIV_FONT="Arial";7

//下拉区内补丁大小8

varDIV_PADDING="2px";9

//下拉区边框样式10

varDIV_BORDER="1px solid #CCC";11

//文本输入框14

varqueryField;15

//下拉区id16

vardivName;17

//IFrame名称18

varifName;19

//记录上次选择的值20

varlastVal="";21

//当前选择的值22

varval="";23

//显示结果的下拉区24

varglobalDiv;25

//下拉区是否设置格式的标记26

vardivFormatted=false;27

/**//**29

InitQueryCode函数必须在<body onload>事件的响应函数中调用,其中:30

queryFieldName为文本框控件的id,31

hiddenDivName为显示下拉区div的id32

*/33

functionInitQueryCode (queryFieldName, hiddenDivName)34

{35

//指定文本输入框的onblur和onkeydown响应函数36

queryField=document.getElementById(queryFieldName);37

queryField.onblur=hideDiv;38

queryField.onkeydown=keypressHandler;39

//设置queryField的autocomplete属性为"off"41

queryField.autocomplete="off";42

//如果没有指定hiddenDivName,取默认值"querydiv"44

if(hiddenDivName)45

{46

divName=hiddenDivName;47

}48

else49

{50

divName="querydiv";51

}52

//IFrame的name54

ifName="queryiframe";55

//100ms后调用mainLoop函数57

setTimeout("mainLoop()",100);58

}59

/**//**61

获取下拉区的div,如果没有则创建之62

*/63

functiongetDiv (divID)64

{65

if(!globalDiv)66

{67

//如果div在页面中不存在,创建一个新的div68

if(!document.getElementById(divID))70

{71

varnewNode=document.createElement("div");72

newNode.setAttribute("id", divID);73

document.body.appendChild(newNode);74

}75

//globalDiv设置为div的引用77

globalDiv=document.getElementById(divID);78

//计算div左上角的位置80

varx=queryField.offsetLeft;81

vary=queryField.offsetTop+queryField.offsetHeight;82

varparent=queryField;83

while(parent.offsetParent)84

{85

parent=parent.offsetParent;86

x+=parent.offsetLeft;87

y+=parent.offsetTop;88

}89

//如果没有对div设置格式,则为其设置相应的显示样式91

if(!divFormatted)92

{93

globalDiv.style.backgroundColor=DIV_BG_COLOR;94

globalDiv.style.fontFamily=DIV_FONT;95

globalDiv.style.padding=DIV_PADDING;96

globalDiv.style.border=DIV_BORDER;97

globalDiv.style.width="100px";98

globalDiv.style.fontSize="90%";99

100

globalDiv.style.position="absolute";101

globalDiv.style.left=x+"px";102

globalDiv.style.top=y+"px";103

globalDiv.style.visibility="hidden";104

globalDiv.style.zIndex=10000;105

106

divFormatted=true;107

}108

}109

110

returnglobalDiv;111

}112

113

/**//**114

根据返回的结果集显示下拉区115

*/116

functionshowQueryDiv(resultArray)117

{118

//获取div的引用119

vardiv=getDiv(divName);120

121

//如果div中有内容,则删除之122

while(div.childNodes.length>0)123

div.removeChild(div.childNodes[0]);124

125

//依次添加结果126

for(vari=0; i<resultArray.length; i++)127

{128

//每一个结果也是一个div129

varresult=document.createElement("div");130

//设置结果div的显示样式131

result.style.cursor="pointer";132

result.style.padding="2px 0px 2px 0px";133

//设置为未选中134

_unhighlightResult(result);135

//设置鼠标移进、移出等事件响应函数136

result.onmousedown=selectResult;137

result.onmouseover=highlightResult;138

result.onmouseout=unhighlightResult;139

140

//结果的文本是一个span141

varresult1=document.createElement("span");142

//设置文本span的显示样式143

result1.className="result1";144

result1.style.textAlign="left";145

result1.style.fontWeight="bold";146

result1.innerHTML=resultArray[i];147

148

//将span添加为结果div的子节点149

result.appendChild(result1);150

151

//将结果div添加为下拉区的子节点152

div.appendChild(result);153

}154

155

//如果结果集不为空,则显示,否则不显示156

showDiv(resultArray.length>0);157

}158

159

/**//**160

用户点击某个结果时,将文本框的内容替换为结果的文本,161

并隐藏下拉区162

*/163

functionselectResult()164

{165

_selectResult(this);166

}167

168

//选择一个条目169

function_selectResult(item)170

{171

varspans=item.getElementsByTagName("span");172

if(spans)173

{174

for(vari=0; i<spans.length; i++)175

{176

if(spans[i].className=="result1")177

{178

queryField.value=spans[i].innerHTML;179

lastVal=val=escape(queryField.value);180

mainLoop();181

queryField.focus();182

showDiv(false);183

return;184

}185

}186

}187

}188

189

/**//**190

当鼠标移到某个条目之上时,高亮显示该条目191

*/192

functionhighlightResult()193

{194

_highlightResult(this);195

}196

197

function_highlightResult(item)198

{199

item.style.backgroundColor=DIV_HIGHLIGHT_COLOR;200

}201

202

/**//**203

当鼠标移出某个条目时,正常显示该条目204

*/205

functionunhighlightResult()206

{207

_unhighlightResult(this);208

}209

210

function_unhighlightResult(item)211

{212

item.style.backgroundColor=DIV_BG_COLOR;213

}214

215

/**//**216

显示/不显示下拉区217

*/218

functionshowDiv (show)219

{220

vardiv=getDiv(divName);221

if(show)222

{223

div.style.visibility="visible";224

}225

else226

{227

div.style.visibility="hidden";228

}229

//adjustiFrame();230

}231

232

/**//**233

隐藏下拉区234

*/235

functionhideDiv ()236

{237

showDiv(false);238

}239

240

/**//**241

调整IFrame的位置,这是为了解决div可能会显示在输入框后面的问题242

*/243

functionadjustiFrame()244

{245

//如果没有IFrame,则创建之246

if(!document.getElementById(ifName))247

{248

varnewNode=document.createElement("iFrame");249

newNode.setAttribute("id", ifName);250

newNode.setAttribute("src","javascript:false;");251

newNode.setAttribute("scrolling","no");252

newNode.setAttribute("frameborder","0");253

document.body.appendChild(newNode);254

}255

256

iFrameDiv=document.getElementById(ifName);257

vardiv=getDiv(divName);258

259

//调整IFrame的位置与div重合,并在div的下一层260

try261

{262

iFrameDiv.style.position="absolute";263

iFrameDiv.style.width=div.offsetWidth;264

iFrameDiv.style.height=div.offsetHeight;265

iFrameDiv.style.top=div.style.top;266

iFrameDiv.style.left=div.style.left;267

iFrameDiv.style.zIndex=div.style.zIndex-1;268

iFrameDiv.style.visibility=div.style.visibility;269

}270

catch(e)271

{272

}273

}274

275

/**//**276

文本输入框的onkeydown响应函数277

*/278

functionkeypressHandler (evt)279

{280

//获取对下拉区的引用281

vardiv=getDiv(divName);282

283

//如果下拉区不显示,则什么也不做284

if(div.style.visibility=="hidden")285

{286

returntrue;287

}288

289

//确保evt是一个有效的事件290

if(!evt&&window.event)291

{292

evt=window.event;293

}294

varkey=evt.keyCode;295

296

varKEYUP=38;297

varKEYDOWN=40;298

varKEYENTER=13;299

varKEYTAB=9;300

301

//只处理上下键、回车键和Tab键的响应302

if((key!=KEYUP)&&(key!=KEYDOWN)&&(key!=KEYENTER)&&(key!=KEYTAB))303

{304

returntrue;305

}306

307

varselNum=getSelectedSpanNum(div);308

varselSpan=setSelectedSpan(div, selNum);309

310

//如果键入回车和Tab,则选择当前选择条目311

if((key==KEYENTER)||(key==KEYTAB))312

{313

if(selSpan)314

{315

_selectResult(selSpan);316

}317

evt.cancelBubble=true;318

returnfalse;319

}320

else//如果键入上下键,则上下移动选中条目321

{322

if(key==KEYUP)323

{324

selSpan=setSelectedSpan(div, selNum-1);325

}326

if(key==KEYDOWN)327

{328

selSpan=setSelectedSpan(div, selNum+1);329

}330

if(selSpan)331

{332

_highlightResult(selSpan);333

}334

}335

336

//显示下拉区337

showDiv(true);338

returntrue;339

}340

341

/**//**342

获取当前选中的条目的序号343

*/344

functiongetSelectedSpanNum(div)345

{346

varcount=-1;347

varspans=div.getElementsByTagName("div");348

if(spans)349

{350

for(vari=0; i<spans.length; i++)351

{352

count++;353

if(spans[i].style.backgroundColor!=div.style.backgroundColor)354

{355

returncount;356

}357

}358

}359

360

return-1;361

}362

363

/**//**364

选择指定序号的结果条目365

*/366

functionsetSelectedSpan(div, spanNum)367

{368

varcount=-1;369

varthisSpan;370

varspans=div.getElementsByTagName("div");371

if(spans)372

{373

for(vari=0; i<spans.length; i++)374

{375

if(++count==spanNum)376

{377

_highlightResult(spans[i]);378

thisSpan=spans[i];379

}380

else381

{382

_unhighlightResult(spans[i]);383

}384

}385

}386

387

returnthisSpan;388

}389

InitQueryCode函数必须在页面的onload响应中执行，该函数最后调用setTimeout方法执行了mainLoop方法。注意，mainLoop方法并没有在lookup.js中定义，必须在包含lookup.js文件的页面文件中增加该函数的定义。于此，我们就需要在Default.aspx页面上加入如下定义：

mainLoop=function()4

val=escape(queryField.value);6

if(lastVal!=val)7

varresponse=_Default.GetSearchItems(val);9

showQueryDiv(response.value);10

lastVal=val;11

}12

setTimeout('mainLoop()',100);13

returntrue;14

}15

</script>

由上述代码可以看到mainLoop函数每隔100ms会执行一次，它会判断当前文本输入框的值和上次提交查询的值是否相同，如果不同，它会重新向服务器发送请求进行查询，并且更新下拉区域的显示。于此，一个基于 Ajax的自动完成功能就实现了。

本文借鉴于《ajax web2.0快速入门与项目实践》。
这本书上还使用了控件将该功能进行了封装，这样要实现Ajax的自动完成功能就更加方便了。在此就不做过多解说。

本文示例代码下载：AutoComplete.rar

---------------------------------------------------------------------------------------------------------

转载于:https://www.cnblogs.com/beniao/archive/2008/05/03/1171515.html

基于AJAX的自动完成相关推荐

php yii2自动给值,Yii2基于Ajax自动获取表单数据的方法
本文实例讲述了Yii2基于Ajax自动获取表单数据的方法.分享给大家供大家参考,具体如下: 这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gi ...
php考试倒计时提交系统,AJAX_基于Ajax技术实现考试倒计时并自动提交试卷，1.概述在开发网络考试系统 - phpStudy...
基于Ajax技术实现考试倒计时并自动提交试卷 1.概述在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访 ...
ajax获取表单php,Yii2基于Ajax自动获取表单数据的方法
本文实例讲述了Yii2基于Ajax自动获取表单数据的方法.分享给大家供大家参考,具体如下: 这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gi ...
php ajax 考试倒计时,基于Ajax技术实现考试倒计时并自动提交试卷
1.概述在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访问准备考试页面index.jsp,在该页面中, ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...
移动端ajax,jQuery基于$.ajax设置移动端click超时处理方法
本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为 ...
(转）基于Ajax的应用程序架构汇总
浏览器端框架被划分成两大类: ·应用程序框架:提供浏览器的功能,但是常以包括窗口小部件抽象和另外的部件而出名,其功能主要围绕桌面GUI框架. ·基本结构框架:提供基本的管道和可移植的浏览器抽象,让开发 ...
基于ajax毕业设计题目50例
基于ajax毕业设计题目1-10题 1.基于AJAX的Web应用构件组装技术及工具 2.基于AJAX技术对Web考试系统性能改进研究与实现 3.基于AJAX技术协作知识建构学习平台的研究与设计 4.基 ...
ajax无刷新聊天室,实现一个无刷新的基于ajax的简易聊天室
实现一个基于ajax的简易聊天室 1 程序主页面在线交流对话 include_once("server1.server.php"); #servidor para XAJAX $ ...

基于AJAX的自动完成

基于AJAX的自动完成相关推荐

最新文章

热门文章