自动提示的文本框(加Ajax异步交互)

最新推荐文章于 2021-08-06 07:22:45 发布

aspnet2002web

最新推荐文章于 2021-08-06 07:22:45 发布

阅读量941

点赞数

分类专栏： .NET与JavaScript 文章标签： ajax colors function xmlhttprequest border string

本文链接：https://blog.csdn.net/aspnet2002web/article/details/5869702

版权

.NET与JavaScript 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

<!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>

-- 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;

}

#popup.hide

{

/* 隐藏提示框的边框*/

border: none;

}

/* 提示框的样式风格*/

{

list-style: none;

margin: 0px;

padding: 0px;

}

li.mouseOver

{

background-color: #004a7e;

color: #FFFFFF;

}

li.mouseOut

{

background-color: #FFFFFF;

color: #004a7e;

}

-- ></style>

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();

//返回的结果responseText，每个匹配项间用逗号分隔，然后用split转换为数组，传递给setColors函数

if(xmlHttp.responseText.length){

aResult = xmlHttp.responseText.split(",");

setColors(aResult); //显示服务器结果

}

else

clearColors();

}

xmlHttp.send(null);

}

else

clearColors(); //无输入时清除提示框（例如用户按del键）

}

</script>

</head>

<body>

Color:<input type="text" name="colors" id="colors" onkeyup="findColors();" />

</form>

</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"};