寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,433,044 次
  • 运行天数:612 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

简单模拟google输入自动完成

昨晚看到景圳的QQ空间里一篇关于用JS控制DIV显示位置的文章,想到自己之前写订餐系统时的一个模拟Google输入自动完成的方法,于是也想整理出来。之前本BLOG转来的一篇文章比我这个方法更完善点,详细见:用AJAX实现google输入自动完成的简单模拟。本文介绍的这种方法也是用AJAX来实现,没做太多的注释,不过都蛮容易看懂的。

下面先看截图:

实现方法:

JS
  1. <script language=“javascript” type=“text/javascript”>
  2. var oLeft=0,oTop=0,oWidth=0,oHeight=0;
  3. var oLeft1=180,oTop1=220,oWidth1=100;
  4. var disStr_TrueName;
  5. var thisInput_TrueName;
  6. var thisInputValue_TrueName;
  7. var username=“”;
  8. //获取坐标输入框的坐标
  9. function getAbsPoint()
  10. {
  11. e = document.getElementById(“ctl00$ContentPlaceHolder1$txtUserName”);
  12. var x   =   e.offsetLeft,   y   =   e.offsetTop;
  13. while(e=e.offsetParent)
  14. {
  15. x   +=   e.offsetLeft;
  16. y   +=   e.offsetTop;
  17. }
  18. oLeft1=x;
  19. oTop1=y+20;
  20. }
  21. //输入框内容改变触发事件
  22. function showUserInfo_TrueName_List_callBack()
  23. {
  24. txtAuthor=document.getElementById(“ctl00$ContentPlaceHolder1$txtUserName”);
  25. username=txtAuthor.value;
  26. thisInputValue_TrueName=username;
  27. //通过AJAX读取数据库获取信息
  28. AjaxMethod.getUserInfoByTrueName(username,getUserInfoByTrueName_CallBack);
  29. }
  30. //构造信息内容
  31. function getUserInfoByTrueName_CallBack(response)
  32. {
  33. if (response.value != null)
  34. {
  35. var ds = response.value;
  36. try{
  37. if(ds != null && typeof(ds) == “object” && ds.Tables != null)
  38. {
  39. tbStr=“<table id=’AJAX_UsersShowTB1’style=’BORDER-RIGHT: #cccccc 1px double; BORDER-TOP: #cccccc 1px double; BORDER-LEFT: #cccccc 1px double; BORDER-BOTTOM: #cccccc 1px double’ width=’100%’ align=’center’>”
  40. for(var i=0; i<ds.Tables[0].Rows.length; i++)
  41. {
  42. username = ds.Tables[0].Rows[i].U_Name;
  43. tbStr+=“<tr onMouseover=\”javacript:className=’big-table-Mouseover’;this.style.cursor=’hand’\” onMouseout=\”javacript:className=’big-tableTR-White’\” style=’height: 18px;’ onclick=’javascript:selectIt(this)’>”;
  44. tbStr+=“<td>”+username+“</td>”;
  45. tbStr+=“</tr>”;
  46. }
  47. tbStr+=“</table>”
  48. }else
  49. {
  50. }
  51. disStr_TrueName=tbStr;
  52. showUserInfo_TrueName_List();
  53. }catch(exception)
  54. {
  55. }
  56. }
  57. }
  58. //显示DIV
  59. function showUserInfo_TrueName_List()
  60. {
  61. getAbsPoint();
  62. document.all(“UserInfoListByNameDiv”).style.display=“block”;
  63. document.all(“UserInfoListByNameDiv”).style.top=oTop1;
  64. document.all(“UserInfoListByNameDiv”).style.left=oLeft1;
  65. document.all(“UserInfoListByNameDiv”).style.width=oWidth1;
  66. document.getElementById(“UserInfoListByNameDiv”).innerHTML=disStr_TrueName;
  67. setTimeout(“clearUserInfo_TrueName_List();”,100000);//设置多少毫秒后自动隐藏DIV
  68. }
  69. //选择触发事件
  70. function selectIt(obj)
  71. {
  72. clearUserInfo_TrueName_List();
  73. txtAuthor=document.getElementById(“ctl00$ContentPlaceHolder1$txtUserName”);
  74. txtAuthor.value = obj.firstChild.innerText;
  75. }
  76. //清除DIV
  77. function clearUserInfo_TrueName_List()
  78. {
  79. document.all(“UserInfoListByNameDiv”).style.display=“none”;
  80. }
  81. document.write(“<div id=’UserInfoListByNameDiv’ style=’Z-INDEX:9999;LEFT: 1px; COLOR:#0066ff; border: 1 solid #000000; background:#dfffff;WIDTH: 200px; POSITION: absolute; TOP: 10px; HEIGHT: 40px;display:none’></div>”)
  82. </script>

aspx页面控件:

HTML代码
  1. 户:<input name=“ctl00$ContentPlaceHolder1$txtUserName” type=“text” id=“ctl00_ContentPlaceHolder1_txtUserName” class=“inputbox” size=“10” onkeyup=“showUserInfo_TrueName_List_callBack()” />
本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2008-03-28
3,486 views
暂无评论

发表评论

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。