纯javascript 自动补全，不涉及数据库

来源：互联网发布：2017赛季林书豪数据编辑：程序博客网时间：2024/06/05 19:33
<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(oLi);            oLi.appendChild(document.createTextNode(pipei[i]));            oLi.onmousemove = function(){                updateBg()                this.className = "mouseover";                }            oLi.onmouseout = function(){                updateBg()                this.className = "mouseout";                }            oLi.onclick = function(){                inputVlaue.value = this.firstChild.nodeValue;                    clearField();            }        }    }  </script></head><body><form name="myForm1">          搜索:<input type="text" name="colors" id="colors" autocomplete="off" onkeyup="start(event);" />      </form>      <div id="popup">          <ul id="colors_ul"></ul>      </div></body><style type="text/css">    <!--      body{          font-family: Arial,Helvetica,sans-serif;          font-size: 12px; padding: 0px; margin: 5px;      }      form{padding: 0px; margin: 0px;}      input{          /*用户输入框的样式*/          font-family: Arial,Helvetica,sans-serif;          font-size: 12px; border: 1px solid #000000;          width: 200px; padding: 1px; margin: 0px;      }      #popup{          /*提示框div块的样式*/          position: absolute; width: 202px;          color: #004a7e; font-size: 12px;          font-family: Arial,Helvetica,sans-serif;          left: 36px; top: 25px; border:1px solid #666;    }      #popup.show{          /*显示提示框的边框*/          border: 1px solid #004a7e;      }      #popup.hide{          /*隐藏提示框的边框*/          border: none;         }      /*提示框的样式风格*/      ul{          list-style: none;          margin: 0px; padding: 0px;      }      li.mouseover{          background-color:#666;          color: #FFFFFF;      }      li.mouseout{          background-color: #FFFFFF;          color: #004a7e;      }    li.clear{background-color:#FFF;color: #004a7e;}    li.over{ background-color:#666; color:#FFFFFF;}    --> </style></html>
0 0