AutoComplete控件-优快云博客

<HTML>

<HEAD>

<TITLE>AutoComplete</TITLE>

</HEAD>

<!--

/**

** ==================================================================================================

** 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|中国|中|中国上海'>

<!--

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'>

<!--

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>

输入自动完成类