JavaScript实现带自动提醒的文本框效果代码
|
JavaScript实现带自动提醒的文本框效果代码： 示例一：直接编写AJAX 实现。 客户端： 代码如下: <!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; } /* 提示框的样式风格 */ ul{ list-style:none; margin:0px; padding:0px; } li.mouseOver{ background-color:#004a7e; color:#FFFFFF; } li.mouseOut{ background-color:#FFFFFF; color:#004a7e; } --> </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 + "×tamp=" + 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); //显示服务器结果 } （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
