输入自动完成类
V0.1（2006-11-10）
- 纯JS，无须再加CSS
- 支持键盘鼠标
- 仅IE6+
V0.2（2006-11-16）
- 修复了多个控件的下拉不隐藏的BUG
- 修改下拉背景的透明问题
V0.3（2006-12-22）
- 修复了键盘和鼠标选择的BUG
- 增加了JS代码添加选项的功能
V0.31（2006-12-25）
- 修复了无匹配时下拉后的BUG
<HTML>
<HEAD>
<TITLE>AutoComplete</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
** ==================================================================================================
** ClassName ：CLASS_AUTOCOMPLETE
** Intro ：a control similar IE Address Bar
** Example ：
Ver ： 0.31
---------------------------------------------------------------------------------------------------
nick：<INPUT size=30 name=q autolist='ba|ttyp|"|tt|typ|中国上海市|www.baidu.com|www.google.con|jimao8|中国|中|中国上海'>
<SCRIPT LANGUAGE="JavaScript">
<!--
var acbar = new CLASS_AUOTCOMPLETE();
acbar.setup(document.all.q);
//-->
< /SCRIPT>
---------------------------------------------------------------------------------------------------
** Author ：ttyp
** Email ：ttyp@21cn.com
** Date ：2006-12-25
** ==================================================================================================
**/
function CLASS_AUOTCOMPLETE(ID){
var me = this;
this.contain = document.getElementById("__auto_complete_contain");
this.handle = null;
this.dropdown = false;
this.stopChange = false;
this.line = 0;
this.selectIndex = -1;
this.id = "";
if(ID!=null&&typeof(ID)!=undefined){
this.id = ID;
}else{
this.id = getNewId();
}
function getNewId(){
return "ID_" + Math.random().toString().substring(2)
}
this.add = function(s){
this.list[this.list.length] = s;
}
this.sort = function(){
//sort
shellSort(this.list);
}
this.show = function(flag){
var contain = me.contain;
if(contain==null||typeof(contain)=="undefined"){
contain = document.createElement("div");
var body = document.body;
if(typeof(body)!="undefined"){
body.appendChild(contain);
}
me.contain = contain;
}
if(flag==undefined||flag==null){
flag = true;
}
if(flag){
var w=1000,h=50,l,t;
me.line = 0;
if(me.handle!=null&&typeof(me.handle)!="undefined"){
var v = me.handle.value;
if(me.list!=null&&typeof(me.list)!="undefined"){
for(var i=contain.childNodes.length-1;i>=0;i--){
contain.removeChild(contain.childNodes[i]);
}
var index = 0;
for(var i=0;i<me.list.length;i++){
if(me.list[i].indexOf(v)==0){
var oo = document.createElement("div");
contain.appendChild(oo);
oo.innerText = me.list[i];
oo.style.height = "16px";
oo.style.width = "100%";
oo.style.overflow="hidden";
oo.style.lineHeight="120%";
oo.style.cursor = "hand";
oo.style.fontSize = "9pt";
oo.style.padding = "0 2 0 2";
oo.setAttribute("accoc",me.id + "__auto_complete_contain");
oo.setAttribute("sIndex",index);
oo.onmouseover = function(){
this.style.background = "highlight";
this.style.color = "highlighttext";
if(me.selectIndex>=0&&me.selectIndex!=this.getAttribute("sIndex")*1){
var oc = me.contain.childNodes[me.selectIndex];
oc.style.background = "#ffffff";
oc.style.color = "#000000";
}
me.selectIndex = this.getAttribute("sIndex")*1;
}
oo.onmouseout = function(){
this.style.background = "#ffffff";
this.style.color = "#000000";
}
oo.onclick=function(){
me.stopChange = true;
me.handle.value = this.innerText;
me.stopChange = false;
me.show(false);
var r =me.handle.createTextRange();
r.moveStart('character',me.handle.value.length);
r.collapse(true);
r.select();
me.handle.focus();
me.selectIndex = -1;
}
oo.onfocus = function(){ me.handle.focus();}
oo.onblur = me.handle.onblur;
oo.onselectstart = function(){return false;};
me.line++;
index++;
}
}
}
w = me.handle.getBoundingClientRect().right - me.handle.getBoundingClientRect().left;
l = me.handle.getBoundingClientRect().left-2;
t = me.handle.getBoundingClientRect().bottom-2;
}
h = (me.line>6?6*16:me.line*16)+2;
contain.style.position = "absolute";
contain.style.top = t;
contain.style.left = l;
contain.style.width = w;
contain.style.height = h;
contain.style.overflowY = "auto";
contain.style.overflowX = "hidden";
contain.style.backgroundColor = "#ffffff";
contain.style.border = "1px solid black";
contain.setAttribute("accoc",me.id + "__auto_complete_contain");
contain.onblur = me.handle.onblur;
contain.onselectstart = function(){return false;}
contain.onfocus = function(){ me.handle.focus();}
if(me.line<=0){
contain.style.display = "none";
}else{
contain.style.display = "";
}
}else{
contain.style.display = "none";
}
this.dropdown = flag;
}
this.filter = function(){
this.show();
}
this.getText = function(){
if(me.selectIndex>=0){
me.handle.value = me.contain.childNodes[me.selectIndex].innerText;
me.show(false);
var r =me.handle.createTextRange();
r.moveStart('character',me.handle.value.length);
r.collapse(true);
r.select();
me.handle.focus();
me.selectIndex = -1;
}
}
this.move = function(flag){
var osid = me.selectIndex;
if(me.dropdown==false){
me.show(true);
}
if(flag){
me.selectIndex++;
}else{
me.selectIndex--;
}
if(me.selectIndex>me.contain.childNodes.length-1){
me.selectIndex = 0;
}
if(me.selectIndex<0){
me.selectIndex = me.contain.childNodes.length-1;
}
if(osid>=0){
var d = me.contain.childNodes[osid];
if(d!=null&&typeof(d)!="undefined"){
d.style.background = "#ffffff";
d.style.color = "#000000";
}
}
if(me.selectIndex>=0){
var c = me.contain.childNodes[me.selectIndex];
if(c!=null&&typeof(c)!="undefined"){
c.style.background = "highlight";
c.style.color = "highlighttext";
c.scrollIntoView(false);
}
}
}
this.setup = function(o){
this.list = o.getAttribute("autolist").split("|");
//sort
shellSort(this.list);
o.setAttribute("accoc",me.id + "__auto_complete_contain");
this.handle = o;
o.onpropertychange = function(){
if(event.propertyName=="value"){
if(me.stopChange==false){
me.filter();
}
}
}
o.ondblclick = function(){
me.filter();
}
o.onkeydown= function(){
switch(event.keyCode){
case 38://up
me.move(false);
break;
case 40://down
me.move(true);
break;
case 13:
me.getText();
break;
default:
//alert(event.keyCode);
}
}
o.onblur=function(){
var active = document.activeElement;
var stopHide = false;
if(active!=null){
var ac = active.getAttribute("accoc");
if(ac!=null&&typeof(ac)!="undefined"&&ac==me.id + "__auto_complete_contain"){
stopHide = true;
}
}
if(stopHide==false){
me.show(false);
}
}
}
function shellSort(arr){
for (var step = arr.length >> 1; step > 0; step >>= 1){
for (var i = 0; i < step; ++i){
for (var j = i + step; j < arr.length; j += step){
var k = j, value = arr[j];
while (k >= step && arr[k - step] > value){
arr[k] = arr[k - step];
k -= step;
}
arr[k] = value;
}
}
}
}
}
//-->
</SCRIPT>
<BODY>
nick：<INPUT size=30 name=q autolist='ba|ttyp|"|tt|typ|中国上海市|jimao8|中国|中|中国上海'>
addr：<INPUT size=30 name=p autolist='www.baidu.com|www.google.con|www.cnblogs.com/ttyp'>
<SCRIPT LANGUAGE="JavaScript">
<!--
var acbar1 = new CLASS_AUOTCOMPLETE();
acbar1.setup(document.all.q);
acbar1.add("hello");
acbar1.sort();
var acbar2 = new CLASS_AUOTCOMPLETE();
acbar2.setup(document.all.p);
//-->
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE>AutoComplete</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
** ==================================================================================================
** ClassName ：CLASS_AUTOCOMPLETE
** Intro ：a control similar IE Address Bar
** Example ：
Ver ： 0.31
---------------------------------------------------------------------------------------------------
nick：<INPUT size=30 name=q autolist='ba|ttyp|"|tt|typ|中国上海市|www.baidu.com|www.google.con|jimao8|中国|中|中国上海'>
<SCRIPT LANGUAGE="JavaScript">
<!--
var acbar = new CLASS_AUOTCOMPLETE();
acbar.setup(document.all.q);
//-->
< /SCRIPT>
---------------------------------------------------------------------------------------------------
** Author ：ttyp
** Email ：ttyp@21cn.com
** Date ：2006-12-25
** ==================================================================================================
**/
function CLASS_AUOTCOMPLETE(ID){
var me = this;
this.contain = document.getElementById("__auto_complete_contain");
this.handle = null;
this.dropdown = false;
this.stopChange = false;
this.line = 0;
this.selectIndex = -1;
this.id = "";
if(ID!=null&&typeof(ID)!=undefined){
this.id = ID;
}else{
this.id = getNewId();
}
function getNewId(){
return "ID_" + Math.random().toString().substring(2)
}
this.add = function(s){
this.list[this.list.length] = s;
}
this.sort = function(){
//sort
shellSort(this.list);
}
this.show = function(flag){
var contain = me.contain;
if(contain==null||typeof(contain)=="undefined"){
contain = document.createElement("div");
var body = document.body;
if(typeof(body)!="undefined"){
body.appendChild(contain);
}
me.contain = contain;
}
if(flag==undefined||flag==null){
flag = true;
}
if(flag){
var w=1000,h=50,l,t;
me.line = 0;
if(me.handle!=null&&typeof(me.handle)!="undefined"){
var v = me.handle.value;
if(me.list!=null&&typeof(me.list)!="undefined"){
for(var i=contain.childNodes.length-1;i>=0;i--){
contain.removeChild(contain.childNodes[i]);
}
var index = 0;
for(var i=0;i<me.list.length;i++){
if(me.list[i].indexOf(v)==0){
var oo = document.createElement("div");
contain.appendChild(oo);
oo.innerText = me.list[i];
oo.style.height = "16px";
oo.style.width = "100%";
oo.style.overflow="hidden";
oo.style.lineHeight="120%";
oo.style.cursor = "hand";
oo.style.fontSize = "9pt";
oo.style.padding = "0 2 0 2";
oo.setAttribute("accoc",me.id + "__auto_complete_contain");
oo.setAttribute("sIndex",index);
oo.onmouseover = function(){
this.style.background = "highlight";
this.style.color = "highlighttext";
if(me.selectIndex>=0&&me.selectIndex!=this.getAttribute("sIndex")*1){
var oc = me.contain.childNodes[me.selectIndex];
oc.style.background = "#ffffff";
oc.style.color = "#000000";
}
me.selectIndex = this.getAttribute("sIndex")*1;
}
oo.onmouseout = function(){
this.style.background = "#ffffff";
this.style.color = "#000000";
}
oo.onclick=function(){
me.stopChange = true;
me.handle.value = this.innerText;
me.stopChange = false;
me.show(false);
var r =me.handle.createTextRange();
r.moveStart('character',me.handle.value.length);
r.collapse(true);
r.select();
me.handle.focus();
me.selectIndex = -1;
}
oo.onfocus = function(){ me.handle.focus();}
oo.onblur = me.handle.onblur;
oo.onselectstart = function(){return false;};
me.line++;
index++;
}
}
}
w = me.handle.getBoundingClientRect().right - me.handle.getBoundingClientRect().left;
l = me.handle.getBoundingClientRect().left-2;
t = me.handle.getBoundingClientRect().bottom-2;
}
h = (me.line>6?6*16:me.line*16)+2;
contain.style.position = "absolute";
contain.style.top = t;
contain.style.left = l;
contain.style.width = w;
contain.style.height = h;
contain.style.overflowY = "auto";
contain.style.overflowX = "hidden";
contain.style.backgroundColor = "#ffffff";
contain.style.border = "1px solid black";
contain.setAttribute("accoc",me.id + "__auto_complete_contain");
contain.onblur = me.handle.onblur;
contain.onselectstart = function(){return false;}
contain.onfocus = function(){ me.handle.focus();}
if(me.line<=0){
contain.style.display = "none";
}else{
contain.style.display = "";
}
}else{
contain.style.display = "none";
}
this.dropdown = flag;
}
this.filter = function(){
this.show();
}
this.getText = function(){
if(me.selectIndex>=0){
me.handle.value = me.contain.childNodes[me.selectIndex].innerText;
me.show(false);
var r =me.handle.createTextRange();
r.moveStart('character',me.handle.value.length);
r.collapse(true);
r.select();
me.handle.focus();
me.selectIndex = -1;
}
}
this.move = function(flag){
var osid = me.selectIndex;
if(me.dropdown==false){
me.show(true);
}
if(flag){
me.selectIndex++;
}else{
me.selectIndex--;
}
if(me.selectIndex>me.contain.childNodes.length-1){
me.selectIndex = 0;
}
if(me.selectIndex<0){
me.selectIndex = me.contain.childNodes.length-1;
}
if(osid>=0){
var d = me.contain.childNodes[osid];
if(d!=null&&typeof(d)!="undefined"){
d.style.background = "#ffffff";
d.style.color = "#000000";
}
}
if(me.selectIndex>=0){
var c = me.contain.childNodes[me.selectIndex];
if(c!=null&&typeof(c)!="undefined"){
c.style.background = "highlight";
c.style.color = "highlighttext";
c.scrollIntoView(false);
}
}
}
this.setup = function(o){
this.list = o.getAttribute("autolist").split("|");
//sort
shellSort(this.list);
o.setAttribute("accoc",me.id + "__auto_complete_contain");
this.handle = o;
o.onpropertychange = function(){
if(event.propertyName=="value"){
if(me.stopChange==false){
me.filter();
}
}
}
o.ondblclick = function(){
me.filter();
}
o.onkeydown= function(){
switch(event.keyCode){
case 38://up
me.move(false);
break;
case 40://down
me.move(true);
break;
case 13:
me.getText();
break;
default:
//alert(event.keyCode);
}
}
o.onblur=function(){
var active = document.activeElement;
var stopHide = false;
if(active!=null){
var ac = active.getAttribute("accoc");
if(ac!=null&&typeof(ac)!="undefined"&&ac==me.id + "__auto_complete_contain"){
stopHide = true;
}
}
if(stopHide==false){
me.show(false);
}
}
}
function shellSort(arr){
for (var step = arr.length >> 1; step > 0; step >>= 1){
for (var i = 0; i < step; ++i){
for (var j = i + step; j < arr.length; j += step){
var k = j, value = arr[j];
while (k >= step && arr[k - step] > value){
arr[k] = arr[k - step];
k -= step;
}
arr[k] = value;
}
}
}
}
}
//-->
</SCRIPT>
<BODY>
nick：<INPUT size=30 name=q autolist='ba|ttyp|"|tt|typ|中国上海市|jimao8|中国|中|中国上海'>
addr：<INPUT size=30 name=p autolist='www.baidu.com|www.google.con|www.cnblogs.com/ttyp'>
<SCRIPT LANGUAGE="JavaScript">
<!--
var acbar1 = new CLASS_AUOTCOMPLETE();
acbar1.setup(document.all.q);
acbar1.add("hello");
acbar1.sort();
var acbar2 = new CLASS_AUOTCOMPLETE();
acbar2.setup(document.all.p);
//-->
</SCRIPT>
</BODY>
</HTML>
生活学习
