服务器之家

服务器之家 > 正文

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

时间:2019-09-02 09:24     来源/作者:脚本之家
示例一:直接编写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); //显示服务器结果 

else 
clearColors(); 


xmlHttp.send(null); 

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

</script> 
</head> 
<body> 
<form method="post" name="myForm1"> 
Color: <input type="text" name="colors" id="colors" onkeyup="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); 
%> 

示例二:使用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[i]+"</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" onkeyup="findColors();" /> 
</form> 
<div id="popup"> 
<ul id="colors_ul"></ul> 
</div> 
</body> 
</html> 

服务器端(14-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); 
%> 

相关文章

热门资讯

华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字 2019-06-05
叠猫猫队长可以退出吗 叠猫猫队长怎么换队伍
叠猫猫队长可以退出吗 叠猫猫队长怎么换队伍 2019-06-05
逃跑吧少年怎么卡皮肤 逃跑吧少年卡永久皮肤技巧
逃跑吧少年怎么卡皮肤 逃跑吧少年卡永久皮肤技巧 2019-06-21
返回顶部