AJAX学习笔记之制作带自动提示的文本框

最新推荐文章于 2022-05-24 22:26:21 发布

milk1626

最新推荐文章于 2022-05-24 22:26:21 发布

阅读量568

点赞数

分类专栏： AJAX 读书笔记文章标签： ajax colors function xmlhttprequest string quartz

本文链接：https://blog.csdn.net/milk1626/article/details/5453613

版权

读书笔记同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

AJAX

13 篇文章 0 订阅

订阅专栏

在之前的文章上修改，通过异步交互实现：

9-10.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax实现自动提示的文本框</title>
<style>

</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv;  //因此采用全局变量的形式
var oColorsUl;
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
  xmlHttp = new XMLHttpRequest();
}
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
  oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框，传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示，再继续
oPopDiv.className = "show";
var oLi;
for(var i=0;i<the_colors.length;i++){
  //将匹配的提示结果逐一显示给用户
  oLi = document.createElement("li");
  oColorsUl.appendChild(oLi);
  oLi.appendChild(document.createTextNode(the_colors[i]));

  oLi.onmouseover = function(){
   this.className = "mouseOver"; //鼠标经过时高亮
  }
  oLi.onmouseout = function(){
   this.className = "mouseOut"; //离开时恢复原样
  }
  oLi.onclick = function(){
   //用户点击某个匹配项时，设置输入框为该项的值
   oInputField.value = this.firstChild.nodeValue;
   clearColors(); //同时清除提示框
  }
}
}
function findColors(){
initVars();  //初始化变量
if(oInputField.value.length > 0){
  createXMLHttpRequest();  //将用户输入发送给服务器
  var sUrl = "9-10.aspx?sColor=" + oInputField.value + "&timestamp=" + new Date().getTime();
  xmlHttp.open("GET",sUrl,true);
  xmlHttp.onreadystatechange = function(){
   if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    var aResult = new Array();
    if(xmlHttp.responseText.length){
     aResult = xmlHttp.responseText.split(",");
     setColors(aResult); //显示服务器结果
    }
    else
     clearColors();
   }
  }
  xmlHttp.send(null);
}
else
  clearColors(); //无输入时清除提示框（例如用户按del键）
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" οnkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>

9-10.aspx：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
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;i<aColors.Length;i++){
  if(aColors[i].IndexOf(sInput) == 0)
   sResult += aColors[i] + ",";
}
if(sResult.Length>0)         //如果有匹配项
  sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
Response.Write(sResult);
%>