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 + "&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++){

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

%>

时间： 2024-10-25 22:47:19

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

JavaScript在ASP页面中实现掩码文本框效果代码_应用技巧

最近在做一个程序正好需要用到此方面,在网上找到过相应的程序,但用起来都非常恶,于是乎只好自己实现一个了. 首先实现两个函数用来操作光标: 复制代码 代码如下: // 得到一个文本框控件的当前光标位置 function getPos(obj) { obj.focus(); var workRange=document.selection.createRange(); obj.select(); var allRange=document.selection.createRange(); workR

JavaScript在ASP页面中实现掩码文本框效果代码

最近在做一个程序正好需要用到此方面,在网上找到过相应的程序,但用起来都非常恶,于是乎只好自己实现一个了. 首先实现两个函数用来操作光标: 复制代码 代码如下: // 得到一个文本框控件的当前光标位置 function getPos(obj) { obj.focus(); var workRange=document.selection.createRange(); obj.select(); var allRange=document.selection.createRange(); workR

Android AutoCompleteTextView自动提示文本框实例代码_Android

 自动提示文本框(AutoCompleteTextView)可以加强用户体验,缩短用户的输入时间(百度的搜索框就是这个效果). 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码:   最后一张获取文本框里面的值(其实就跟TextView.EditText一样): 首先,在xml中定义AutoCompleteTextView控件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/ap

Android AutoCompleteTextView自动提示文本框实例代码

自动提示文本框(AutoCompleteTextView)可以加强用户体验,缩短用户的输入时间(百度的搜索框就是这个效果). 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 最后一张获取文本框里面的值(其实就跟TextView.EditText一样): 首先,在xml中定义AutoCompleteTextView控件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r

利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

 这篇文章主要介绍了利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域.需要的朋友可以过来参考下,希望对大家有所帮助 原理就是循环获取网页上的控件,然后设置disabled 属性为true.   代码如下:   代码如下: <script type="text/javascript">     var nodeList = document.getElementsByTagName("input");     for (var i =

JavaScript输入邮箱自动提示实例代码

 这篇文章主要介绍了JavaScript输入邮箱自动提示实例代码,有需要的朋友可以参考一下 本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试   写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着.   这里所说的js的模板引擎,用的是原生的javascript语法,所以很类似php的原生模板引擎.       前端模板引擎的作用?   1. 可以让前端开发更简单,不需要为了生成一个dom结构而使

Android UI设计系列之自定义TextView属性实现带下划线的文本框（4）_Android

在Android开发过程中,如果Android系统自带的属性不能满足我们日常开发的需求,那么就需要我们给系统控件添加额外的属性了.假如有个需求是实现带下划线的文本显示(下划线),如果不使用自定义属性的话实现起来也不太难(起码我认为的实现方式是有许多种的),今天就讲解一下如何使用自定义属性来实现上述带下划线的文本框吧.还好Android中自定义属性不是很复杂,也可以归纳为三步走吧. 老规矩,还是先贴出工程目录吧: 一.添加属性文件 在values文件夹中新建attrs.xml文件,在文件中新建属性

问下如何在MyEclipse7.0中配置web.xml 让它带自动提示struts标签功能

问题描述 问下如何在MyEclipse7.0中配置web.xml让它带自动提示struts标签功能那位高手知道帮解答下小弟万分感激!就是在web.xml中输入个<然后会提示 解决方案 解决方案二:问下如何在MyEclipse7.0中配置web.xml让它带自动提示struts标签功能那位高手知道帮解答下小弟万分感激!就是在web.xml中输入个<然后会提示解决方案三:其实很简单的:以spring2.0的配置文件为例(其他基本类似):进入:window->Preference...->