Discuz教程网

1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › JavaScript实现带自动提示的文本框效果代码
返回列表 发新帖

JavaScript实现带自动提示的文本框效果代码

[复制链接]
authicon dly 发表于 2011-9-14 09:09:15 | 显示全部楼层 |阅读模式
示例一：直接编写AJAX 实现。
客户端：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Ajax实现自动提示的文本框</title>
  5. <style>
  6. <!--
  7. body{
  8. font-family:Arial, Helvetica, sans-serif;
  9. font-size:12px; padding:0px; margin:5px;
  10. }
  11. form{padding:0px; margin:0px;}
  12. input{
  13. /* 用户输入框的样式 */
  14. font-family:Arial, Helvetica, sans-serif;
  15. font-size:12px; border:1px solid #000000;
  16. width:200px; padding:1px; margin:0px;
  17. }
  18. #popup{
  19. /* 提示框div块的样式 */
  20. position:absolute; width:202px;
  21. color:#004a7e; font-size:12px;
  22. font-family:Arial, Helvetica, sans-serif;
  23. left:41px; top:25px;
  24. }
  25. #popup.show{
  26. /* 显示提示框的边框 */
  27. border:1px solid #004a7e;
  28. }
  29. #popup.hide{
  30. /* 隐藏提示框的边框 */
  31. border:none;
  32. }
  33. /* 提示框的样式风格 */
  34. ul{
  35. list-style:none;
  36. margin:0px; padding:0px;
  37. }
  38. li.mouseOver{
  39. background-color:#004a7e;
  40. color:#FFFFFF;
  41. }
  42. li.mouseOut{
  43. background-color:#FFFFFF;
  44. color:#004a7e;
  45. }
  46. -->
  47. </style>
  48. <script language="javascript">
  49. var oInputField; //考虑到很多函数中都要使用
  50. var oPopDiv; //因此采用全局变量的形式
  51. var oColorsUl;
  52. var xmlHttp;
  53. function createXMLHttpRequest(){
  54. if(window.ActiveXObject)
  55. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  56. else if(window.XMLHttpRequest)
  57. xmlHttp = new XMLHttpRequest();
  58. }
  59. function initVars(){
  60. //初始化变量
  61. oInputField = document.forms["myForm1"].colors;
  62. oPopDiv = document.getElementById("popup");
  63. oColorsUl = document.getElementById("colors_ul");
  64. }
  65. function clearColors(){
  66. //清除提示内容
  67. for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
  68. oColorsUl.removeChild(oColorsUl.childNodes[i]);
  69. oPopDiv.className = "hide";
  70. }
  71. function setColors(the_colors){
  72. //显示提示框，传入的参数即为匹配出来的结果组成的数组
  73. clearColors(); //每输入一个字母就先清除原先的提示，再继续
  74. oPopDiv.className = "show";
  75. var oLi;
  76. for(var i=0;i<the_colors.length;i++){
  77. //将匹配的提示结果逐一显示给用户
  78. oLi = document.createElement("li");
  79. oColorsUl.appendChild(oLi);
  80. oLi.appendChild(document.createTextNode(the_colors[i]));
  81. oLi.onmouseover = function(){
  82. this.className = "mouseOver"; //鼠标经过时高亮
  83. }
  84. oLi.onmouseout = function(){
  85. this.className = "mouseOut"; //离开时恢复原样
  86. }
  87. oLi.onclick = function(){
  88. //用户点击某个匹配项时，设置输入框为该项的值
  89. oInputField.value = this.firstChild.nodeValue;
  90. clearColors(); //同时清除提示框
  91. }
  92. }
  93. }
  94. function findColors(){
  95. initVars(); //初始化变量
  96. if(oInputField.value.length > 0){
  97. createXMLHttpRequest(); //将用户输入发送给服务器
  98. var sUrl = "9-10.aspx?sColor=" + oInputField.value + "×tamp=" + new Date().getTime();
  99. xmlHttp.open("GET",sUrl,true);
  100. xmlHttp.onreadystatechange = function(){
  101. if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  102. var aResult = new Array();
  103. if(xmlHttp.responseText.length){
  104. aResult = xmlHttp.responseText.split(",");
  105. setColors(aResult); //显示服务器结果
  106. }
  107. else
  108. clearColors();
  109. }
  110. }
  111. xmlHttp.send(null);
  112. }
  113. else
  114. clearColors(); //无输入时清除提示框（例如用户按del键）
  115. }
  116. </script>
  117. </head>
  118. <body>
  119. <form method="post" name="myForm1">
  120. Color: <input type="text" name="colors" id="colors" />
  121. </form>
  122. <div id="popup">
  123. <ul id="colors_ul"></ul>
  124. </div>
  125. </body>
  126. </html>
复制代码

服务器端（9-10.aspx ）：
  1. <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
  2. <%@ Import Namespace="System.Data" %>
  3. <%
  4. Response.CacheControl = "no-cache";
  5. Response.AddHeader("Pragma","no-cache");
  6. string sInput = Request["sColor"].Trim();
  7. if(sInput.Length == 0)
  8. return;
  9. string sResult = "";
  10. string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brass","bronze","brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkhaki","darkmagenta","darkolivegreen","darkorchid","darkorenge","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","feldspar","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod","golenrod","gostwhite","gray","green","greenyellow","honeydew","hotpink","indianred","inen","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow","lightgray","lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","quartz","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray","snow","springgreen","steelblue","tan","thistle","tomato","turquoise","violet","violetred","wheat","whitesmoke","yellow","yellowgreen"};
  11. for(int i=0;i<aColors.Length;i++){
  12. if(aColors[i].IndexOf(sInput) == 0)
  13. sResult += aColors[i] + ",";
  14. }
  15. if(sResult.Length>0) //如果有匹配项
  16. sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
  17. Response.Write(sResult);
  18. %>
复制代码

示例二：使用jQuery 实现。
客户端：

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery实现自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
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{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
color:#004a7e;
}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
function initVars(){
//初始化变量
oInputField = $("#colors");
oPopDiv = $("#popup");
oColorsUl = $("#colors_ul");
}
function clearColors(){
//清除提示内容
oColorsUl.empty();
oPopDiv.removeClass("show");
}
function setColors(the_colors){
//显示提示框，传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示，再继续
oPopDiv.addClass("show");
for(var i=0;i<the_colors.length;i++)
//将匹配的提示结果逐一显示给用户
oColorsUl.append($("<li>"+the_colors+"</li>"));
oColorsUl.find("li").click(function(){
oInputField.val($(this).text());
clearColors();
}).hover(
function(){$(this).addClass("mouseOver");},
function(){$(this).removeClass("mouseOver");}
);
}
function findColors(){
initVars(); //初始化变量
if(oInputField.val().length > 0){
//获取异步数据
$.get("14-10.aspx",{sColor:oInputField.val()},
function(data){
var aResult = new Array();
if(data.length > 0){
aResult = data.split(",");
setColors(aResult); //显示服务器结果
}
else
clearColors();
});
}
else
clearColors(); //无输入时清除提示框（例如用户按del键）
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html> [/code]
服务器端（14-10.aspx ）：
  1. <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
  2. <%@ Import Namespace="System.Data" %>
  3. <%
  4. Response.CacheControl = "no-cache";
  5. Response.AddHeader("Pragma","no-cache");
  6. string sInput = Request["sColor"].Trim();
  7. if(sInput.Length == 0)
  8. return;
  9. string sResult = "";
  10. string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brass","bronze","brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkhaki","darkmagenta","darkolivegreen","darkorchid","darkorenge","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","feldspar","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod","golenrod","gostwhite","gray","green","greenyellow","honeydew","hotpink","indianred","inen","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow","lightgray","lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","quartz","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray","snow","springgreen","steelblue","tan","thistle","tomato","turquoise","violet","violetred","wheat","whitesmoke","yellow","yellowgreen"};
  11. for(int i=0;i<aColors.Length;i++){
  12. if(aColors[i].IndexOf(sInput) == 0)
  13. sResult += aColors[i] + ",";
  14. }
  15. if(sResult.Length>0) //如果有匹配项
  16. sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
  17. Response.Write(sResult);
  18. %>
复制代码




上一篇：asp Jpeg图片水印有杂点的完美解决方法
下一篇：JS高级拖动技术 setCapture，releaseCapture
回复

举报

authicon 微博评论 发表于 2011-9-14 11:06:10 | 显示全部楼层
看了你的论坛，javascript栏目下的内容很好，谢啦！

来自 罗荣杭 的新浪微博
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-25 13:22

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表