纯javascript 自动补全，不牵系数据库
日期：2014-05-16 浏览次数：20371 次
纯javascript 自动补全，不涉及数据库
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var inputVlaue;
var div;
var ul;
var ccc = ["111","222","2","3332","233","333","444","555","666","777","888","999"];
var index = -1;
/*初始化变量*/
function init(){
inputVlaue = document.forms["myForm1"].colors;
div = document.getElementById("popup");
ul = document.getElementById("colors_ul");
}
/*更新北京*/
function updateBg(){
for(var i=0;i<ul.getElementsByTagName('li').length;i++){
ul.getElementsByTagName('li')[i].className = "clear";
}
}
function start(event){
//兼容IE
event = event || window.event;
//如果按了down键
if(event.keyCode==40){
index = index + 1;
//如果“提示”列表已经显示,则把焦点切换到列表中的第一个数据项上
if(index == ul.getElementsByTagName('li').length){
index = 0;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else{
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}
return false;
}
//如果按了up键
else if(event.keyCode==38){
index = index - 1;
//alert(index);
//如果“提示”列表已经显示,则把焦点切换到列表中的最后一个数据项上
if(index == -2){
index = 0;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else if(index == -1){
index = ul.getElementsByTagName('li').length - 1;
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}else{
updateBg();
ul.getElementsByTagName('li')[index].className = "over"
inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
}
return false;
}else if(event.keyCode==13){
div.className = "show";
return false;
}else{
index = -1;
init();
if(inputVlaue.value.length > 0){
var pipei = new Array();
for(var i = 0; i<ccc.length; i++){
if(ccc[i].indexOf(inputVlaue.value) == 0){
pipei.push(ccc[i]);
}
}
/*设置显示*/
if(pipei.length > 0){
setField(pipei);
}else{
clearField();
}
}else{
clearField();
}
}
}
/*清空*/
function clearField(){
for(var i = ul.childNodes.length - 1; i >=0; i--){
ul.removeChild(ul.childNodes[i]);
}
div.className = "hide";
}
/*设置显示*/
function setField(pipei){
/**/
div.className = "show";
clearField();
var oLi;
for(var i = 0;i<pipei.length;i++){
oLi = document.createElement("li");
ul.appendChild(oL
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
