本文介绍了一种使用HTML和JavaScript实现的自定义自动完成输入框功能，该功能可根据用户输入的内容提供匹配建议，适用于网站搜索等场景。通过排序和过滤预设的数据列表，能够有效地提升用户体验。
<!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.onkeyup=__ACP);hw:expression(this.ondblclick=__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" onclick="divclick(this)" onmouseover=DivOver(this);HighLine='+line+';SelectValue="'+liststrarr[i].replace(//"/ig,"//"")+'"; 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,"//"")+'"; 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|haiwa|blueidea|hw|google|jimao8|中国|中|海娃|李海华" size="40" name="q"><br>
网址：<input type="text" autolist="http://www.51windows.Net|http://www.blueidea.com|http://www.youkuaiyun.com" size="40" name="q">
<div id="__AutocompleteDiv" style="position: absolute;border: 1 solid #000000;display:none;height:180px;background:#FFFFFF;" onclick="event.cancelBubble=true">
<div class="sdiv" id="__AutocompleteDivlist" onclick="event.cancelBubble=true">
</div>
</div>
</body>
</html>
<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.onkeyup=__ACP);hw:expression(this.ondblclick=__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" onclick="divclick(this)" onmouseover=DivOver(this);HighLine='+line+';SelectValue="'+liststrarr[i].replace(//"/ig,"//"")+'"; 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,"//"")+'"; 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|haiwa|blueidea|hw|google|jimao8|中国|中|海娃|李海华" size="40" name="q"><br>
网址：<input type="text" autolist="http://www.51windows.Net|http://www.blueidea.com|http://www.youkuaiyun.com" size="40" name="q">
<div id="__AutocompleteDiv" style="position: absolute;border: 1 solid #000000;display:none;height:180px;background:#FFFFFF;" onclick="event.cancelBubble=true">
<div class="sdiv" id="__AutocompleteDivlist" onclick="event.cancelBubble=true">
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
