纯javascript 自动补全，不涉及数据库_js自动补齐库-优快云博客

本文链接：https://blog.youkuaiyun.com/u014649204/article/details/24022567
<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" οnkeyup="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>