js自动揭示效果-JavaSript-爱易网页

js自动揭示效果

日期：2014-05-16　浏览次数：20452 次

js自动提示效果
<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)
   {

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js自动揭示效果

相关资料更多>

推荐阅读更多>