自动完成【纯HTML+Javascript】

来源：互联网发布：微信软件登陆编辑：程序博客网时间：2024/06/11 10:55

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<title>自定义自动完成-51windows.Net</title>

<head>

<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.onkeyup=__ACP);hw:expression(this.ondblclick=__ACP);}

</style>

</head>

<!--

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" onclick="divclick(this)" onmouseover=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>

</body>

</html>