<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>js自动提示效果</title>
</head>
<script language="javascript">
var intIndex=0;arrList = new Array();
//将初始化的列表转换成数组
function dearray(str)//定义array
{
arrList = str.split(",");
intIndex = arrList.length;
}
//初始化下拉列表项
function begin()
{
init();
var str="邢晓璐,邢晓红";
dearray(str);
downList(arrList,"wd");
}
function init()
{
if(arrList.constructor!=Array)
{
alert("downList初始化失败:第一个参数非数组!");
return;
}
arrList.sort( function(a, b)
{
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
});
}
function downList(arrList,objInputId)
{
var objouter=document.getElementById("keysList"); //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的
if (objInput==null)
{
alert("downList初始化失败:没有找到"+objInputId+"文本框");
return;
}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display="none";
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
objInput.onfocus=checkAndShow;
//判断按下的安键
function checkKeyCode(evt)
{
evt = evt || window.event;
var keyCode = window.event ? evt.keyCode : evt.which;
//var keyCode = String.fromCharCode(key);
if (keyCode==40||keyCode==38)
{//下上
var isUp=false
if(keyCode==40) isUp=true;
chageSelection(isUp);
}
else if (keyCode==13)
{//回车
outSelection(selectedIndex);
}
else
{
checkAndShow(evt);
}
divPosition(evt);
}
function checkAndShow(evt)
{
var strInput = objInput.value;
if (strInput!="")
{
divPosition(evt);
selectedIndex=-1;
objouter.innerHTML ="";
for (intTmp=0;intTmp<arrList.length;intTmp++)
{
if (arrList[intTmp].substr(0, strInput.length)==strInput)
{
addOption(arrList[intTmp]);
}
}
objouter.style.display="";
}
else
{
objouter.style.display="none";
}
//想下拉列表里添加匹配项
function addOption(value)
{
objouter.innerHTML +="<div onmouseover=this.className=\"sman_selectedStyle\";document.getElementById(\""+objInputId+"\").value=\"" + value + "\" onmouseout=this.className=\"\" onmousedown=document.getElementById(\""+objInputId+"\").value=\"" + value + "\">" + value + "</div>"
}
}//end checkAndShow()
function chageSelection(isUp)
{
if (objouter.style.display=="none")
{
objouter.style.display="";
}
else
{
if (isUp)
selectedIndex++;
else
selectedIndex--;
}
var maxIndex = objouter.childNodes.length-1;
if (selectedIndex<0){selectedIndex=0;}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex;}
for (intTmp=0;intTmp<=maxIndex;intTmp++)
{
if (intTmp==selectedIndex)
{
objouter.childNodes[intTmp].className="sman_selectedStyle";
//当上下键移动时，将选中的文本写到文本框中
document.getElementById(objInputId).value=objouter.childNodes[intTmp].innerHTML;
}
else
{
objouter.childNodes[intTmp].className="";
}
}
}
function outSelection(Index)
{
objInput.value = objouter.childNodes[Index].innerHTML;
objouter.style.display="none";
}
//显示下拉列表项
function divPosition(evt)
{
var e = objInput;
var ie = (document.all)? true:false
//定义列表区在不同浏览器中的位置
if (ie)
{
var top = 0;
var left = -2;
}
else
{
var top = 2;
var left = 0;
}
while (e.offsetParent)
{
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
objouter.style.top = (top + objInput.clientHeight) + "px";
objouter.style.left = left + "px";
objouter.style.width= objInput.clientWidth+1 + "px";
}
}//end downList()
function getAbsoluteHeight(ob)
{
return ob.offsetHeight;
}
function getAbsoluteWidth(ob)
{
return ob.offsetWidth;
}
function getAbsoluteLeft(ob)
{
var mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" )
{
mendingLeft += ob .offsetParent.offsetLeft;
mendingOb = ob.offsetParent;
}
return mendingLeft;
}
function getAbsoluteTop(ob)
{
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" )
{
mendingTop += ob.offsetParent.offsetTop;
ob = ob.offsetParent;
}
return mendingTop;
}
Number.prototype.NaN0 = function()
{
return isNaN(this)?0:this;
}
//出现光标
document.write("<div id=\"keysList\" style=\"position:absolute;display:none;background:#FFFFFF;border: 1px solid #CCCCCC;font-size:14px;cursor: default;\" onblur> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
</script>
<body onLoad="begin()">
<form name="search" action="" method="get">
<input autocomplete="off" type="text" id="wd" name="wd">
</form>
</body>
</html>
分享到：
相关推荐
因此简单用div写了一个alert提示框，并自动关闭。 效果图 css样式 /*弹出消息对话框样式*/ .show_alert_box{ width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:rgba(0,0,0,0.6); ...
标题中的“自动提示的js与css”指的是在网页开发中，使用JavaScript（js）和Cascading Style Sheets（css）实现的一种用户交互功能——输入框自动提示。这种功能常见于搜索框、表单输入等场景，能提升用户体验，帮助...
本主题将深入探讨如何利用jQuery实现内容自动分页功能，并同时应用两种不同的分页效果。通过提供的链接（http://www.whkge.com/jsview/design20110828a/）可以看到实际的效果演示。 一、jQuery基础与自动分页原理 ...
文本框下拉列表自动提示效果,用户在输入一个或多个值会自动提示数据库里面的值 RecommResource.aspx和RecommResource.aspx.cs文件是可以动态生成JS文件,另外外部还有一个JS
jQuery输入框自动提示车牌号码验证效果, 输入车牌号，下方提示，例如输入w ,则出现皖 ,这样的一个效果，在商城网站或者企业网站都会用到搜索的功能，与此功能类似，可以参考，php中文网推荐下载！
**JavaScript自动检索录入技术详解** 在网页开发中，提供一种类似百度输入时的自动匹配功能，可以极大地提升用户的输入体验，这种技术被称为自动检索或自动补全。在本篇文章中，我们将深入探讨如何使用JavaScript...
2. **鼠标悬停提示**：类似于163登录后的提示效果，这通常通过`title`属性或自定义JavaScript事件实现，当鼠标悬停在元素上时显示额外信息。 3. **文字省略号显示**：当文本内容超过指定宽度时，使用CSS的`text-...
在本项目中，"JS实现自动提示文本框"指的是利用JavaScript来创建一个功能，当用户在文本框输入时，能够实时显示与输入内容匹配的提示信息，这种功能常见于搜索框或自动补全输入场景。 要实现这样的功能，首先需要在...
"导入JS就可以实现自动注册AJAX异步操作的动画效果"这一技术就是针对这一点而设计的，它使得开发者无需编写大量复杂的代码，就能为页面上的AJAX请求添加优雅的加载动画，从而提供更好的视觉反馈，让用户知道后台正在...
在JavaScript中，我们可以轻松实现这种自动动态的tips提示信息框效果，以提高用户体验。下面将详细介绍如何利用JavaScript来创建这样的小气泡框。 首先，我们需要理解基本的HTML结构，通常一个提示信息框包括一个...
本项目"AJAX百度搜索自动提示效果+JQuery滑动效果"结合了这两者的优势，为用户提供了类似百度搜索那样的实时自动提示功能，并辅以jQuery的平滑滑动效果，让网页界面更加生动且易用。 首先，我们来详细探讨AJAX技术...
在本文中，我们将深入探讨如何使用JavaScript实现页面加载完毕之前的“loading”提示效果。这个效果可以在页面内容完全加载之前，向用户展示一个“页面加载中，请稍后...”的提示，以提升用户体验，避免用户在等待...
"jQuery javascript js html h5 屏幕 右下角弹窗 自动提醒"这个主题涉及的技术点主要集中在如何使用jQuery库来创建一个在屏幕右下角自动弹出的消息提醒组件。下面将详细介绍这一知识点。 jQuery是一个广泛使用的...
标题 "完美的自动完成效果(JS)" 描述了一个使用JavaScript实现的高效且功能丰富的自动完成功能。这个功能在用户输入时可以提供智能提示，显示多个字段的数据，并且支持使用多个控件来处理不同的选择项，提高了用户...
65:___自动播放——Js幻灯片缓冲效果 66:___规定区域的JS拖动展示效果 67:___超漂亮Js+css图片幻灯切换 68:___马赛克效果的JS图片切换代码 69:___鼠标放到图片上会滑出提示文字 70:___鼠标滑过,缩略图放大显示（纯...
文章还提到了一种提示框的效果，通过JavaScript动态创建并显示提示信息： - **提示框的基本配置**： - `tPopWait`: 设置等待时间（毫秒），用于控制提示信息出现前的延迟。 - `tPopShow`: 设置提示信息显示的总...
这里，`.element`是你想要添加提示效果的DOM元素，`content`参数设置提示内容，`delay`参数设定自动消失前的延迟时间（以毫秒计）。 如果希望提示框由用户手动关闭，可以添加一个关闭按钮并绑定点击事件。例如： ``...
### JavaScript 实现图片自动播放效果 #### 知识点概览 本文主要介绍如何使用JavaScript实现图片自动播放的效果。此效果常用于网站上的幻灯片展示或者广告轮播图等场景，通过定时器来切换不同的图片，使得页面更加...
4. **CSS3动画**：为了让消息提示框有自动关闭的效果，我们可以利用CSS3的过渡（`transition`）和定时器（`setTimeout`或`setInterval`）来实现。通过设置一个时间延迟，消息框在一定时间后自动消失。 5. **DOM操作...
5. **幻灯片和轮播图**：许多网站使用JS制作自动播放的图片轮播或内容切换效果，如Bootstrap的Carousel组件，通过定时器和事件监听实现。 6. **滚动特效**：例如视差滚动，当用户滚动页面时，背景以较慢的速度移动...