下面我们来看一下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); //显示服务器结果
}
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);
%>本文转自：https://www.cnblogs.com/xugang/archive/2010/08/07/1794705.html
以上就是JavaScript制作带自动提示的文本框的方法的详细内容，更多请关注0133技术站其它相关文章！
