自动完成【纯HTML+Javascript】

这是最原始是自动完成，可以根据需要改改成为你想要的【关键是<input 标签的 autolist 属性】

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< title > 自定义自动完成-51windows.Net </ title >
< head >
< meta  name ="keywords"  content ="51windows.Net" >
< meta  http-equiv =Content-Type  content ="text/html; charset=gb2312" >
< style > ...
.sdiv{...}{font-size:12px;overflow-y:auto;overflow-x:hidden;height:expression(this.parentElement.style.pixelHeight);z-index:101;}
.sdivover{...}{background:highlight;color:highlighttext;width:100%;padding-left:3px;cursor:default;overflow:hidden;hidden;line-height:120%;}
.sdivout {...}{background:#FFFFFF;color:#000000;width:100%;padding-left:3px;cursor:default;overflow:hidden;line-height:120%;}
input{...}{haiwa:expression(this.οnkeyup=__ACP);hw:expression(this.οndblclick=__ACP);}
</ style >
</ head >
< body  onclick ="divclick()"  onkeydown ="KeyDown()" >
< SCRIPT  LANGUAGE ="JavaScript" > ...
<!--
var __InputName;
var HighLine = 0
var MenuStrs = ""
var MenuLines = 0
var KeyOnMenu = false
var _AutoObj
var ShowLine = 10
var LineHeight = 15
var SelectValue = "";
var __InputName;
function DivOver(obj)...{
    if (KeyOnMenu)...{
        updateHtml(-1);
        KeyOnMenu = false
    }
    obj.className="sdivover";
}

function divclick(obj)...{
    document.getElementById("__AutocompleteDiv").style.display = "none";
    if (obj)...{
        selectedvalue = obj.innerText;
        __InputName.value = selectedvalue;
    }
    HighLine = 0
    _Autostr = ""
    SelectValue = ""
}
function __ACP()...{
    if (event.keyCode!=13)...{
        event.cancelBubble=true
        e = this;
        var t=e.offsetTop; 
        var l=e.offsetLeft; 
        var w=e.offsetWidth;
        var h=e.offsetHeight;
        _AutoObj = this
        divID = document.getElementById("__AutocompleteDiv");
        __InputName = this;
        updateHtml(HighLine);
        if (MenuLines>0)...{
            while(e=e.offsetParent)
            ...{ 
                t+=e.offsetTop; 
                l+=e.offsetLeft; 
            }
            divID = eval(divID);
            divID.style.top = t+h;
            divID.style.left = l;
            divID.style.width = w;
            divID.style.height = MenuLines * LineHeight>ShowLine*LineHeight?ShowLine*LineHeight:MenuLines * LineHeight;
            divID.style.display = ""
        }
        else...{
            divID.style.display = "none"
        }
    }
}
function InsertSort(arr) ...{ //插入排序->直接插入法排序@panliu888
    var temp, j;
    for(var i=1; i<arr.length; i++) ...{
        if((arr[i]) < (arr[i-1])) ...{
            temp = arr[i];
            j = i-1;
            do ...{
                arr[j+1] = arr[j];
                j--;
            }
            while (j>-1 && (temp) < (arr[j]));
            arr[j+1] = temp;
        }//endif
    }
    return arr;
}
function updateHtml(k)...{
     listhtml = ""
    var line = 0
    htmlarr = InsertSort(_AutoObj.autolist.split("|"))
    var liststrarr = htmlarr;
    for(i=0;i<liststrarr.length;i++)...{
        if((liststrarr[i].substr(0,_AutoObj.value.length)==_AutoObj.value)&&(liststrarr[i].length>_AutoObj.value.length))...{
            line ++;
            if (k==line)...{
                SelectValue = liststrarr[i]
                listhtml += '<div class="sdivover" οnclick="divclick(this)" οnmοuseοver=DivOver(this);HighLine='+line+';SelectValue="'+liststrarr[i].replace(/"/ig,"/&#34")+'"; onmouseout=this.className="sdivout";>'+liststrarr[i]+'</div>';
            }
            else
                listhtml += '<div class="sdivout" onclick="divclick(this)" onmouseover=DivOver(this);HighLine='+line+';;SelectValue="'+liststrarr[i].replace(/"/ig,"/&#34")+'"; onmouseout=this.className="sdivout";>'+liststrarr[i]+'</div>';
        }
    }
    MenuLines = line
    document.getElementById("__AutocompleteDivlist").innerHTML = listhtml;
    document.getElementById("__AutocompleteDivlist").scrollTop = (k-ShowLine)>0?(k-ShowLine)*LineHeight:0;
}
function KeyDown(){
    switch ( event.keyCode ){
        case 13 : if(SelectValue.length>0){_AutoObj.value =SelectValue;divclick();}break ;
        case 38 : KeyMove(-1) ;    break ;
        case 40 : KeyMove(1) ;    break ;
    }
}
function KeyMove(n){
    HighLine = HighLine+(n);
    if (parseInt(HighLine)>parseInt(MenuLines)){HighLine = 1;}
    if(parseInt(HighLine)<1){HighLine = MenuLines;}
    KeyOnMenu = true;
    updateHtml(HighLine)
}
//-->
</SCRIPT>
昵称：<input type="text" autolist="51windows|&#34|haiwa|blueidea|hw|google|jimao8|中国|中|海娃|李海华" size="40" name="q"><br>
网址：<input type="text" autolist="http://www.51windows.Net|http://www.blueidea.com|http://www.csdn.Net" size="40" name="q">

<div id="__AutocompleteDiv" style="position: absolute;border: 1 solid #000000;display:none;height:180px;background:#FFFFFF;" οnclick="event.cancelBubble=true">
<div class="sdiv" id="__AutocompleteDivlist" οnclick="event.cancelBubble=true">
</div>
</div>
</body>
</html>