|
分享二个自动提示的文本框效果的js实现代码。
例一，直接编写AJAX 实现。
客户端：
-
-
-
-
- Ajax实现自动提示的文本框_bbs.it-home.org
- <script language="javascript"> <li>var oInputField; //考虑到很多函数中都要使用 <li>var oPopDiv; //因此采用全局变量的形式 <li>var oColorsUl; <li>var xmlHttp; <li>function createXMLHttpRequest(){ <li>if(window.ActiveXObject) <li>xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); <li>else if(window.XMLHttpRequest) <li>xmlHttp = new XMLHttpRequest(); <li>} <li>function initVars(){ <li>//初始化变量 <li>oInputField = document.forms["myForm1"].colors; <li>oPopDiv = document.getElementById("popup"); <li>oColorsUl = document.getElementById("colors_ul"); <li>} <li>function clearColors(){ <li>//清除提示内容 <li>for(var i=oColorsUl.childNodes.length-1;i>=0;i--) <li>oColorsUl.removeChild(oColorsUl.childNodes[i]); <li>oPopDiv.className = "hide"; <li>} <li>function setColors(the_colors){ <li>//显示提示框，传入的参数即为匹配出来的结果组成的数组 <li>clearColors(); //每输入一个字母就先清除原先的提示，再继续 <li>oPopDiv.className = "show"; <li>var oLi; <li>for(var i=0;i<the_colors.length;i++){ <li>//将匹配的提示结果逐一显示给用户 <li>oLi = document.createElement("li"); <li>oColorsUl.appendChild(oLi); <li>oLi.appendChild(document.createTextNode(the_colors[i])); <li>oLi.onmouseover = function(){ <li>this.className = "mouseOver"; //鼠标经过时高亮 <li>} <li>oLi.onmouseout = function(){ <li>this.className = "mouseOut"; //离开时恢复原样 <li>} <li>oLi.onclick = function(){ <li>//用户点击某个匹配项时，设置输入框为该项的值 <li>oInputField.value = this.firstChild.nodeValue; <li>clearColors(); //同时清除提示框 <li>} <li>} <li>} <li>function findColors(){ <li>initVars(); //初始化变量 <li>if(oInputField.value.length > 0){ <li>createXMLHttpRequest(); //将用户输入发送给服务器 <li>var sUrl = "9-10.aspx?sColor=" + oInputField.value + "×tamp=" + new Date().getTime(); <li>xmlHttp.open("GET",sUrl,true); <li>xmlHttp.onreadystatechange = function(){ <li>if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ <li>var aResult = new Array(); <li>if(xmlHttp.responseText.length){ <li>aResult = xmlHttp.responseText.split(","); <li>setColors(aResult); //显示服务器结果 <li>} bbs.it-home.org<li>else <li>clearColors(); <li>} <li>} <li>xmlHttp.send(null); <li>} <li>else <li>clearColors(); //无输入时清除提示框（例如用户按del键） <li>} <li></script>
-
-
-
-
-
-
服务器端（9-10.aspx ）：
-
-
-
- Response.CacheControl = "no-cache";
- Response.AddHeader("Pragma","no-cache");
- string sInput = Request["sColor"].Trim();
- if(sInput.Length == 0)
- return;
- string sResult = "";
- 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"};
- for(int i=0;iif(aColors[i].IndexOf(sInput) == 0)
- sResult += aColors[i] + ",";
- }
- if(sResult.Length>0) //如果有匹配项
- sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
- Response.Write(sResult);
- %>
例二，使用jQuery 实现。
客户端：
-
-
-
-
- jQuery实现自动提示的文本框
- <script language="javascript" src="jquery.min.js"></script>
- <script language="javascript"> <li>var oInputField; //考虑到很多函数中都要使用 <li>var oPopDiv; //因此采用全局变量的形式 <li>var oColorsUl; <li>function initVars(){ <li>//初始化变量 <li>oInputField = $("#colors"); <li>oPopDiv = $("#popup"); <li>oColorsUl = $("#colors_ul"); <li>} <li>function clearColors(){ <li>//清除提示内容 <li>oColorsUl.empty(); <li>oPopDiv.removeClass("show"); <li>} <li>function setColors(the_colors){ <li>//显示提示框，传入的参数即为匹配出来的结果组成的数组 <li>clearColors(); //每输入一个字母就先清除原先的提示，再继续 <li>oPopDiv.addClass("show"); <li>for(var i=0;i<the_colors.length;i++) <li>//将匹配的提示结果逐一显示给用户 <li>oColorsUl.append($("<li>"+the_colors[i]+"</script>
")); - 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); //显示服务器结果
- } bbs.it-home.org
- else
- clearColors();
- });
- }
- else
- clearColors(); //无输入时清除提示框（例如用户按del键）
- }
-
-
-
-
-
-
-
服务器端（14-10.aspx ）：
-
-
-
- Response.CacheControl = "no-cache";
- Response.AddHeader("Pragma","no-cache");
- string sInput = Request["sColor"].Trim();
- if(sInput.Length == 0)
- return;
- string sResult = "";
- 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"};
- for(int i=0;iif(aColors[i].IndexOf(sInput) == 0)
- sResult += aColors[i] + ",";
- }
- if(sResult.Length>0) //如果有匹配项
- sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
- Response.Write(sResult);
- %>
|
