<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; chartset=GBK"/>
<style>
.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}
</style>
<script language="javascript">
//--初始化提示
var nameArray = ['张三','李四','www.baidu.com','111111','222222'];
//--数组排序
function arraySort()
{
nameArray.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}
//--将需要提示的对象和提示div绑定
function bindPompDiv(arrList,objInputId){
var objouter=document.getElementById("suggDiv") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:)
if (objInput==null) {alert('页面初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.οnblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.οnkeyup=checkKeyCode;
//文本框得到焦点
objInput.οnfοcus=checkAndShow;
/**/
function checkKeyCode(){
var ie = (document.all)? true:false;
if (ie)
{
var keyCode=event.keyCode ? event.keyCode : event.which;
if (keyCode==40||keyCode==38){ //下上
var isUp=false;
if(keyCode==40) isUp=true;
chageSelection(isUp);
}else if (keyCode==13){//回车
outSelection(selectedIndex);
}else{
checkAndShow();
}
}
else{
checkAndShow();
}
//divPosition();
}
//--非IE浏览器时
function checkAndShow(){
var strInput = objInput.value
if (strInput!=""){
divPosition();
selectedIndex=-1;
objouter.innerHTML ="";
for (intTmp=0;intTmp<arrList.length;intTmp++){
if (arrList[intTmp].substr(0, strInput.length).toUpperCase()==strInput.toUpperCase()){
addOption(arrList[intTmp]);
}
}
objouter.style.display='';
}else{
objouter.style.display='none';
}
function addOption(value){
var sugg = "<div οnmοuseοver=\"this.className='sman_selectedStyle'\" οnmοuseοut=\"this.className=''\" οnmοusedοwn=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>";
objouter.innerHTML += sugg;
}
}
//--鼠标上下选择
function chageSelection(isUp){
if (objouter.style.display=='none'){
objouter.style.display='';
}else{
if (isUp)
selectedIndex++
else
selectedIndex--
}
var maxIndex = objouter.children.length-1;
if (selectedIndex<0){selectedIndex=0}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
for (intTmp=0;intTmp<=maxIndex;intTmp++){
if (intTmp==selectedIndex){
objouter.children[intTmp].className="sman_selectedStyle";
}else{
objouter.children[intTmp].className="";
}
}
}
function outSelection(Index){
objInput.value = objouter.children[Index].innerText;
objouter.style.display='none';
}
function divPosition(){
objouter.style.top=getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
objouter.style.left=getAbsoluteLeft(objInput);
objouter.style.width=getAbsoluteWidth(objInput)
}
}
//--获取对象位置相关方法
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 ;
}
//--清空字符串
function trim(str){return str.replace(/^\s*(.*?)[\s\n]*$/g,'$1')}
//--初始化
function init()
{
bindPompDiv(nameArray,"name");
}
</script>
</head>
<body οnlοad="javascript:init();">
<input type="text" size="30" name="name" id="name"/>
<div id='suggDiv' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;'></div>
</body>
</html>
js 提示自动完成效果
最新推荐文章于 2021-05-30 23:04:31 发布