最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
javascript autocomplate自动提示代码
时间:2009-06-29 编辑:简简单单 来源:一聚教程网
//定义对象
var CJComplete = Class.create();
CJComplete.prototype =
{
TIMER_TICK : 10,
MAX_VISIBLE : 16,
//构造函数
initialize : function(element,type,ejs,sel)
{
this.visible = false;
this.selectedIndex = -1;
this.data = new Array();
this.type = type;
this.ejs = $(ejs);
this.sel = $(sel);
//获取输入框对象,并关闭其自动提示功能
this.element = $(element);
if(!this.element)
{
throw("The specified element does not exist.");
}
this.element.setAttribute("autocomplete","off");
if($("popdiv"))
{
document.body.removeChild($("popdiv"));
}
//创建下拉列表层
this.popup = document.createElement("div");
Element.hide(this.popup);
this.popup.className = "popup";
this.popup.id = "popdiv";
document.body.appendChild(this.popup);
//var iframe = document.createElement("iframe");
//iframe.;
//iframe.;
//this.popup.appendChild(iframe);
//alert($("popdiv"));
//创建下拉列表项数组
this.listItems = new Array();
for(var i=0;i
var item = document.createElement("div");
item.className = "item";
this.popup.appendChild(item);
this.listItems[i] = item ;
item.autocomplete = this;
item.number = i;
item.onclick = this.onItemClick;
item.onmouseover = this.onItemOn;
item.onmouseout = this.onItemOff;
}
Event.unloadCache();
//加入事件监听
Event.observe(this.element,"keypress",this.onKeyPress.bindAsEventListener(this));
Event.observe(this.element,"keydown",this.onKeyDown.bindAsEventListener(this));
Event.observe(document,"click",this.onWindowClick.bindAsEventListener(this));
this.onTick = this.onTick.bind(this);
},
onWindowClick : function(event)
{
var element = Event.element(event);
var parent = element;
while(parent)
{
if(parent == this.element || parent == this.popup)
{
return;
}
parent = parent.parentNode;
}
this.hide();
},
onKeyPress : function(event)
{
if(event.keyCode == Event.KEY_DOWN)
{
if(this.data.length>0)
{
this.selectedIndex++;
if(this.selectedIndex >= this.data.length)
this.selectedIndex = 0;
this.show();
}
Event.stop(event);
return;
}
else if(event.keyCode == Event.KEY_UP)
{
if(this.data.length>0)
{
this.selectedIndex--;
if(this.selectedIndex <= -1)
this.selectedIndex = this.data.length-1;
this.show();
}
Event.stop(event);
return;
}
else if(event.keyCode != 13)
{
if(this.timerId)
clearTimeout(this.timerId);
this.timerId = setTimeout(this.onTick,this.TIMER_TICK);
}
},
onKeyDown : function(event)
{
if(event.keyCode == 13)
{
if(this.visible)
{
this.select();
Event.stop(event);
return false;
}
else
{
openwin(this.sel.value.replace('$StockCode$',this.element.value));
}
}
},
onTick : function()
{
this.selectedIndex = -1;
this.scroll = 0;
if(this.element.value != '')
{
this.loadData("http://web3.jrj.com.cn/quoteelf2/default.aspx?key="+ this.element.value +"&type="+ this.type +"&rand="+Math.round(Math.random()*10000))
}
else
{
this.hide();
}
},
show : function()
{
if(this.data.length <= 0)
return ;
for(var i=0;i
if(this.data[i])
{
this.listItems[i].innerHTML = this.data[i];
if(this.selectedIndex == i)
Element.addClassName(this.listItems[i],"selected");
else
Element.removeClassName(this.listItems[i],"selected");
Element.show(this.listItems[i]);
}
else
{
Element.hide(this.listItems[i]);
}
}
this.visible = true;
Element.show(this.popup);
this.setPopupPosition();
},
hide : function()
{
this.data = new Array();
this.selectedIndex = -1;
this.scroll = 0;
this.visible = false;
Element.hide(this.popup);
},
loadData : function(url)
{
//alert(url);
var me = this;
var newscript = document.createElement("script");
newscript.type = "text/javascript";
newscript.id = me.ejs.id;
newscript.src = url;
document.getElementsByTagName('body')[0].replaceChild(newscript,me.ejs);
me.ejs = newscript;
var load = function()
{
if(typeof(loadflag)=='undefined' || !(loadflag))
{
setTimeout(load,100);
}
else
{
me.data=data;
data=null;
loadflag=false;
if(me.data.length > 0)
me.show();
else
me.hide();
}
};
load();
},
onItemOn : function()
{
for(var i=0;i
Element.addClassName(this,"selected");
this.autocomplete.selectedIndex = this.number;
},
onItemOff : function()
{
Element.removeClassName(this,"selected");
this.autocomplete.selectedIndex = -1;
},
onItemClick : function()
{
this.autocomplete.selectedIndex = this.number;
this.autocomplete.select();
},
select : function()
{
if(this.selectedIndex != -1 && this.data.length>0)
{
this.element.value = this.data[this.selectedIndex].substr(1,this.data[this.selectedIndex].lastIndexOf(']')-1);
}
this.hide();
},
setPopupPosition : function()
{
var position = Position.cumulativeOffset(this.element);
var scrollY = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
var viewsafari") != -1 && window.innerHeight) ? window.innerHeight : document.documentElement.clientHeight;
this.popup.style.;
this.popup.style.left = position[0] + "px";
var popupTop = position[1] + Element.getHeight(this.element);
if((popupTop + this.popup.offsetHeight > scrollY + viewHeight) && (position[1] - this.popup.offsetHeight > scrollY))
{
popupTop = position[1] - this.popup.offsetHeight;
}
this.popup.style.top = popupTop + "px";
}
};
-
上一个: js用户名与密码验证程序
相关文章
- 利用python爬取软考试题之ip自动代理 08-02
- Eclipse中自动添加注释 03-26
- javascript textarea自动增高 和input 自动增长 12-28
- javascript自动求各代码 10-31
- javascript回车让光标自动跳到下一个输入框 09-16
- HTML简单购物数量小程序代码展示 10-31