jquery自动补全.docx

2009-05-18JQuery实现文本框自动补全(修改版)文章分类:Web前端 关键字: jquery 自动补全 鼠标、键盘功能齐全 采用JQuery和.net中的一般处理程序实现文本框的自动补全，鼠标、键盘功能齐全 Html代码 1. 2. 3. 4. 5. 自动补全6. 7. 8. 9. 10. 11. 12. 自动补全：13. 14. 15. 16. 17. 18. 自动补全 自动补全： test.js文件 Javascript代码 1. varhightlight=-1; 2. varoInputField;/考虑到很多函数中都要使用 3. varoPopDiv;/因此采用全局变量的形式 4. varoconUl; 5. functioninitVars() 6. /初始化变量 7. oInputField=$(#txt1); 8. oPopDiv=$(#popup); 9. oconUl=$(#con_ul); 10. 11. functionclearcon() 12. /清除提示内容 13. oconUl.empty(); 14. oPopDiv.removeClass(show); 15. 16. functionsetcon(the_con) 17. /显示提示框，传入的参数即为匹配出来的结果组成的数组 18. clearcon();/每输入一个字母就先清除原先的提示，再继续 19. oPopDiv.addClass(show); 20. for(vari=0;ithe_con.length;i+) 21. /将匹配的提示结果逐一显示给用户 22. oconUl.append($(+the_coni+); 23. oconUl.find(li).click(function() 24. oInputField.val($(this).text(); 25. clearcon(); 26. ).hover( 27. function()$(this).addClass(mouseOver);, 28. function()$(this).removeClass(mouseOver); 29. ); 30. 31. functionfindcon(event) 32. initVars();/初始化变量 33. varmyEvent=event|window.event; 34. varkeycode=myEvent.keyCode;/获取键盘键值 35. if(keycode=65&keycode0) 37. /获取异步数据 38. varurl=handler/test.ashx?parms=+oInputField.val(); 39. $.get(url,function(data) 40. varaResult=newArray(); 41. if(data.length0) 42. aResult=data.split(,); 43. setcon(aResult);/显示服务器结果 44. 45. else46. clearcon(); 47. ); 48. 49. else 50. clearcon();/无输入时清除提示框（例如用户按del键） 51. hightlight=-1 52. 53. elseif(keycode=38|keycode=40)/如果输入的是向上向下 54. 55. if(keycode=38) 56. /向上 57. varautoNodes=oconUl.find(li); 58. 59. if(hightlight!=-1) 60. /把高亮节点恢复 61. autoNodes.eq(hightlight).removeClass(mouseOver); 62. hightlight-; 63. else 64. hightlight=autoNodes.length-1 65. 66. 67. if(hightlight=-1) 68. /如果到顶把高亮移动到最后 69. hightlight=autoNodes.length-1; 70. ; 71. autoNodes.eq(hightlight).addClass(mouseOver); 72. 73. if(keycode=40) 74. /向下 75. varautoNodes=oconUl.find(li); 76. if(hightlight!=-1) 77. /把高亮节点恢复 78. autoNodes.eq(hightlight).removeClass(mouseOver); 79. 80. hightlight+; 81. if(hightlight=autoNodes.length) 82. /如果到顶把高亮移动到最后 83. hightlight=0; 84. 85. autoNodes.eq(hightlight).addClass(mouseOver); 86. 87. elseif(keycode=13) 88. /如果输入的是回车 89. if(hightlight!=-1) 90. /取出节点的内容 91. varcontext=oconUl.find(li).eq(hightlight).text(); 92. clearcon(); 93. hightlight=-1; 94. oInputField.val(context); 95. 96. 97. 98. var hightlight =-1; var oInputField;/考虑到很多函数中都要使用var oPopDiv;/因此采用全局变量的形式var oconUl;function initVars()/初始化变量oInputField = $(#txt1);oPopDiv = $(#popup);oconUl = $(#con_ul);function clearcon()/清除提示内容oconUl.empty();oPopDiv.removeClass(show);function setcon(the_con)/显示提示框，传入的参数即为匹配出来的结果组成的数组clearcon();/每输入一个字母就先清除原先的提示，再继续oPopDiv.addClass(show);for(var i=0;ithe_con.length;i+)/将匹配的提示结果逐一显示给用户oconUl.append($(+the_coni+);oconUl.find(li).click(function()oInputField.val($(this).text();clearcon();).hover(function()$(this).addClass(mouseOver);,function()$(this).removeClass(mouseOver););function findcon(event)initVars();/初始化变量var myEvent = event | window.event;var keycode = myEvent.keyCode; /获取键盘键值if (keycode = 65 & keycode 0)/获取异步数据var url=handler/test.ashx?parms=+oInputField.val();$.get(url,function(data)var aResult = new Array();if(data.length 0)aResult = data.split(,);setcon(aResult);/显示服务器结果elseclearcon(););else clearcon();/无输入时清除提示框（例如用户按del键） hightlight = -1 else if(keycode=38|keycode=40) /如果输入的是向上向下 if(keycode=38)/向上 var autoNodes = oconUl.find(li); if (hightlight != -1 ) /把高亮节点恢复 autoNodes.eq(hightlight).removeClass(mouseOver);hightlight-; else hightlight = autoNodes.length - 1 if(hightlight = -1) /如果到顶 把高亮移动到最后 hightlight = autoNodes.length - 1; ; autoNodes.eq(hightlight).addClass(mouseOver);if(keycode=40)/向下 var autoNodes =oconUl.find(li); if (hightlight != -1 ) /把高亮节点恢复 autoNodes.eq(hightlight).removeClass(mouseOver); hightlight+; if(hightlight = autoNodes.length) /如果到顶 把高亮移动到最后 hightlight = 0; autoNodes.eq(hightlight).addClass(mouseOver);else if (keycode=13)/如果输入的是回车if(hightlight!=-1)/取出节点的内容var context = oconUl.find(li).eq(hightlight).text();clearcon();hightlight = -1;oInputField.val(context);test.css文件 Css代码 1. body 2. 3. font-family:Arial; 4. font-size:14px; 5. padding:0px; 6. margin:10px; 7. 8. .txt1 9. 10. /*用户输入框的样式*/ 11. width:200px; 12. 13. #popup 14. 15. /*提示框div块的样式*/ 16. position:absolute; 17. left:80px; 18. top:32px; 19. width:204px; 20. /*border:solid1pxblack;*/ 21. color:#004a7e; 22. 23. 24. #popup.show 25. /*显示提示框的边框*/ 26. border:1pxsolid#004a7e; 27. 28. 29. ul 30. list-style:none; 31. margin:0px;padding:0px; 32. color:#004a7e; 33. 34. 35. li.mouseOver 36. background-color:#004a7e; 37. color:#FFFFFF; 38. 39. body font-family:Arial; font-size:14px; padding:0px; margin:10px;.txt1/* 用户输入框的样式 */width:200px;#popup/* 提示框div块的样式 */position:absolute;left:80px;top:32px;width:204px;/*border:solid 1px black;*/color:#004a7e;#popup.show/* 显示提示框的边框 */border:1px solid #004a7e;ullist-style:none;margin:0px; padding:0px;color:#004a7e;li.mouseOverbackground-color:#004a7e;color:#FFFFFF;test.ashx一般处理程序文件 C#代码 1. 2. 3. usingSystem; 4. usingSystem.Web; 5. usingSystem.Data; 6. 7. publicclasstest:IHttpHandler 8. 9. publicvoidProcessRequest(HttpContextcontext) 10. context.Response.ContentType=text/plain; 11. stringstr=context.Request.QueryStringparms; 12. if(str.Length=0) 13. 14. return; 15. 16. stringresult=; 17. stringname=newstring