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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript实现带自动提示的文本框效果代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10148字，纯文字阅读大概需要15分钟。

内容图文

示例一：直接编写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); 
%>

内容总结

以上是互联网集市为您收集整理的JavaScript实现带自动提示的文本框效果代码全部内容，希望文章能够帮你解决JavaScript实现带自动提示的文本框效果代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/384084.html

来源：【匿名】

【上一篇】Cookies 欺骗漏洞的防范方法(vbs+js 实现)【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript实现带自动提示的文本框效果代码】教程文章相关的互联网学习教程文章

Js实现带自动提示的文本框效果

分享二个自动提示的文本框效果的js实现代码。例一，直接编写AJAX 实现。客户端： Ajax实现自动提示的文本框_bbs.it-home.org 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; } ...

javascript搜索自动提示功能的实现_javascript技巧【图】

使用 jQuery(Ajax)/PHP/MySQL实现自动完成功我觉得我有必要写这个教程，因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包，然后告诉你怎么使用，而不是告诉你它是如何工作的以及为什么这样做。使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能一如往常，demo和源码的zip包在文章最后，慢慢欣赏吧！我觉得我有必要写这个教程，因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包，然后告诉你怎...

JavaScript文本框下拉提示(自动提示)_表单特效

文本框下拉提示效果 html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,simsun,sans-serif;} button,input,select,textarea{font-size:100%;} a{text-decoration:none;} a:hover{text-decoration:underline;} #wrap{wid...

汉化英文版的DreamweaverCS5并自动提示jquery_jquery

1.首先解决汉化问题如果从Adobe Dreamweaver CS5的官网上下载了一个Adobe Dreamweaver CS5，那么Adobe Dreamweaver CS5默认你是英文版的，我们中国人还是比较习惯看汉字的。我英文不好，还是看汉字比较习惯，虽然看Adobe Dreamweaver CS5的英文提示没什么问题。要解决汉化问题其实很简单，只要下载一个中文语言包放在Adobe Dreamweaver CS5的安装目录下，然后将英文的语言包改个名字或者干脆直接删掉就可以了。 2.jQuery API使用...

简单JS自动提示文本框代码_javascript技巧【图】

本例以颜色为例，为用户提供自动提示，展示效果和运行结果如图： 1、建立框架结构：代码如下: 2、页面和表单CSS：代码如下: 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{ position:absol...

文本框输入时实现自动提示（像百度、google一样）_jquery【图】

只要有三个文件：一个js插件autocomplete.js和autocomplete.css两个文件，这是jquery官方网站提供的插件；他们的下载地址：http://jqueryui.com/demos/autocomplete/ 一个是一般处理程序；一个是apsx页面，看下面的代码吧; 前台：代码如下: $(document).ready(function() { ShowUserList($("#TextBox1"), "LoginTest.ashx"); //TextBox1为文本框的ID，loginTest.ashx为请求的一般处理程序。 function ShowUserList(obj, url...

输入自动提示搜索提示功能的使用说明:sugggestion.txt_javascript技巧【图】

readme: 本文件记录了suggestion.js文件的功能使用说明: 代码如下: /* * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验； * 使用技术:JQuery+Ajax * * 一、如何使用该功能? * 1.使用该功能是需引入以下文件: * 1)/appName/css/common/suggestion.css"/> * 2)/appName/js/common/jquery-1.9.1.js"> * 3)/appName/js/common/suggestion.js">...

输入自动提示搜索提示功能的javascript:sugggestion.js_javascript技巧

代码如下: /** * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验 * 使用说明:参见suggestions.txt文件 * Author:sunfei(孙飞) Date:2013.08.21 */ var SugObj = new Object(); $(document).ready(function(){ //文件加载完成后获取输入框属性信息,确保搜索提示数据和文本输入框中数据的显示效果保持一致 //使用搜索提示功能输入框默认ID Sug...

js输入框邮箱自动提示功能代码实现_javascript技巧

同理此插件不需要任何html标签，只需要一个输入框有相对应的class类名就ok 且父级有个class类名，其他的都不需要。内部的HTML代码都是自动生成的。 HTML代码如下：代码如下: 其实上面的div标签都可以不需要只需要在input输入框且父级元素添加一个如上class(自定义也可以，只是在JS初始化的时候要传入class就ok 我默认情况下父级class叫parentCls,当前输入框class叫inputElem,隐藏域的class叫hiddenCls，在初始化的时候直...

JavaScript输入邮箱自动提示实例代码_javascript技巧【图】

本来想把之前对artTemplate源码解析的注释放上来分享下，不过隔了一年，找不到了，只好把当时分析模板引擎原理后，自己尝试写下的模板引擎与大家分享下，留个纪念，记得当时还对比了好几个模板引擎来着。这里所说的js的模板引擎，用的是原生的javascript语法，所以很类似php的原生模板引擎。前端模板引擎的作用？ 1. 可以让前端开发更简单，不需要为了生成一个dom结构而使用+运算符去拼接字符串，而只需要一个元素的（里面的html...

dreamweaver8实现Jquery自动提示_jquery

最近在学习jQuery，然后在网上找到了自动提示的方法，记之。 1，首先下载jQuery_API.mxp这个扩展文件。 2，打开DW，点击命令-->扩展管理-->文件-->安装扩展， 3，找到你下载好的扩展文件，一直点击确定。 4，重启DW。这样，在编写的时候就会有自动提示了。如果我们需要手动的调出自动提示，那么：点击:编辑-->快捷键-->(选中菜单命令下的编辑)-->编辑-->现实代码提示，按照提示自己配置！

基于javascript实现的搜索时自动提示功能_javascript技巧【图】

当在数据量不是很大，而且没有后端对应的功能接口的时候，一些简单的搜索功能基本上是前端去实现的，正好最近用到，写了一个，贴出来和大家分享：效果图：功能描述：按下键盘后及时搜索条目中的汉字，汉字对应的拼音和号码；实现思路：先将条目中的汉字转换成拼音，然后将汉字，拼音，数字拼接成规律的字符串，放入数组，然后每次按下键盘后判断 input 中的值是汉字，拼音，还是数字，然后按固定的规律去循环数组，这样就能找到...

微信小程序发布新版本时自动提示用户更新的方法【图】

如图，当小程序发布新的版本后，用户如果之前访问过该小程序，通过已打开的小程序进入（未手动删除），则会弹出这个提示，提醒用户更新新的版本。用户点击确定就可以自动重启更新，点击取消则关闭弹窗，不再更新。官方给的示例代码： const updateManager = wx.getUpdateManager()updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调console.log(res.hasUpdate) })updateManager.onUpdateReady(function ()...

IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法【图】

本文实例讲述了IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法。分享给大家供大家参考，具体如下：经常我们用表单提交东西，在提交后，浏览器会自动记录你输入的东西，下次你再输入的时候，可以重新选择,但是如果你是用IE的话，这里有一个BUG, 其他浏览器没有这个问题。当然首先你得设置IE 浏览器选项是可以记录表单数据的，然后写一段代码来测试。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML...

基于javascript实现的搜索时自动提示功能【图】

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript实现带自动提示的文本框效果代码】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

文本框 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程