当前位置：首页 > 编程语言 > JavaScript实现带自动提示的文本框效果代码

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

2018-09-06 13:21

阅读：745

　　示例一：直接编写AJAX 实现。
客户端：
复制代码 代码如下:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
<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(){
//初始化变量
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 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++){
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
<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++){
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //如果有匹配项
sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
Response.Write(sResult);
%>

上一篇：asp Http_Referer,Server_Name和Http_Host

下一篇：mvc 数据访问层详情

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：JavaScript实现带自动提示的文本框效果代码
文章链接：http://soscw.com/essay/11165.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1