实现搜索框自动生成联想词候选

1.效果

参考过几个例子，都只是独立HTML显示，导致没考虑到生成的联想列表无法遮挡下面的其他元素，再者，都是独立的HTML，绑定全属性的css导致移植性不佳。

HTML

    
    






    

        
        搜索
    
    

        

    


    

        乱七八糟的东西
    
梨子梨子梨子
    

        

            

                

                     收藏
                
            
        
    

CSS

search.css

/*---搜索词联想的css------*/
#oul {
    margin: 0;
    padding: 0;
    position: absolute;
}


#bot_box {
    border-left: 1px solid #4C9ED9;;
    border-top: none;
    display: none;
}

#bot_box ul li {
    position: relative;
    z-index:999;
    line-height: 26px;
    list-style: none;
    padding-left: 10px;
    border-left: 0.5px solid teal;
    background: #FFFFFF;
    width: 1000px;

}

#bot_box ul li:hover {
    background: #b9bca9;
}

js

search.js

/*---搜索词联想的js------*/
function $(id) {
    return document.getElementById(id);
}

var ipt = $("ipt");
var ser = $("ser_box");
var bot = $("bot_box");
var oul = $("oul");


ipt.oninput = function() {
    var ss = ipt.value;
    var url = "http://suggestion.baidu.com/su?cb=queryList&wd=" + ss;
    addScript(url);
}

ipt.onfocus = function() {
    var ss = ipt.value;
    var url = "http://suggestion.baidu.com/su?cb=queryList&wd=" + ss;
    addScript(url);

}


function queryList(data) {
    ss=document.getElementsByTagName("script")[0];
    document.body.removeChild(ss)

    var arr = data.s;
    oul.innerHTML = "";
    if(arr.length == 0) {
        bot.style.display = "none";
    } else {
        bot.style.display = "block";
    }

    for(var i = 0; i < arr.length; i++) {
        li = document.createElement("li");
        li.innerHTML = arr[i];
        li.onclick = function() {
            oul.innerHTML = "";
            ipt.value = this.innerHTML;
            bot.style.display = "none";
        }
        oul.appendChild(li);
    }
}

ipt.onkeyup=function () {
    if (ipt.value==""){
        bot.style.display = "none";
    }
}

function addScript(url) {
    var s = document.createElement("script");
    s.src = url;
    s.type = "text/javascript";
    document.body.appendChild(s);
}

/*取li*/

lis = document.getElementsByTagName("li");

/*按键*/
var i = 0;

document.onkeydown = function(ev) {

    if(bot.style.display == "block") {


        if(ev.keyCode == 40) {
            for(var j = 0; j < lis.length; j++) {
                if(lis[j].className == "sel") {
                    lis[j].className = "";
                }
            }

            if(i < lis.length) {
                lis[i].className = "sel";
                i++;
                if(i == lis.length) {
                    i = 0;
                }
            }
        }

        if(ev.keyCode == 38) {
            m = 0
            for(; m < lis.length; m++) {
                if(lis[m].className == "sel") {
                    lis[m].className = "";
                    break;
                }
            }
            i = m;
            if(m > 0) {
                lis[m - 1].className = "sel";
            } else {
                lis[lis.length - 1].className = "sel";
            }
        }




        if(ev.keyCode == 13) {
            for(var n = 0; n < lis.length; n++) {
                if(lis[n].className == "sel") {
                    ipt.value = lis[n].innerHTML;
                }
            }
            bot.style.display = "none";
        }
    } else
     {
        i = 0;
        m = 0;

    }
}