类似于搜索框的功能

1. [代码][JavaScript]代码    

//键盘按下事件
function getHospitalInfo(obj){
    //获取下拉div
    var divs = obj.nextSibling.nextSibling;
    //获取列表集合
    var div = $(divs).children();
    if(event.keyCode == 38){//上
        changeCheck(div,1);
    }else if(event.keyCode == 40){//下
        changeCheck(div,-1);
    }else if(event.keyCode == 13){//Enter
        changeCheck(div,0);
    }else if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32){//键盘按的是字母数字，退格，空格
        //清空div的内容
        $(divs).children().remove();
        //判断文本框是否有值
        if(obj.value){
            setValue(divs,obj);
        }else{
            $(divs).hide();
            $(obj).removeAttr("name");
        }
    }
}

//Obj代表的为当前的文本框，index代表的是当前按的是上 下 Enter
function changeCheck(obj,index){
    var divs = obj.toArray();
    var check = false;
    var postion = 0; 
    for(var i = 0; i < divs.length; i++){
        var div = divs[i];
        if($(div).attr("class").toString() == "div_div border"){//当前列表中已经有选中状态的块
            check = true;
            postion = i;
        }
    }
    if(check){ //代表当前列表有一个选中状态
        if(index == 1){//上
            $(divs[postion]).removeClass("border");
            if(postion == 0){ 
                $(divs[divs.length-1]).addClass("border");
            }else{
                $(divs[postion-1]).addClass("border");
            }
        }else if(index == -1){//下
            $(divs[postion]).removeClass("border");
            if(postion == divs.length-1){ 
                $(divs[0]).addClass("border");
            }else{
                $(divs[postion+1]).addClass("border");
            }
        }else{//enter
            $(divs[postion]).click();
        }
    }
}

//获得焦点
function onGetFous(obj){
    //获取下拉div集合
    var divs = obj.nextSibling.nextSibling;
    //清空div的内容
    $(divs).children().remove();
    //判断文本框是否有值
    if(obj.value){
        setValue(divs,obj);
    }else{
        $(divs).hide();
        $(obj).removeAttr("name");
    }
}

//点击任意位置
$(document).click(function (){
    $(".divs").children().remove();
    $(".divs").hide();
});

//通过得到的值，模糊查询，并把结果填充
function setValue(divs,obj){
    $.ajax({
        url:'selectUrl',
        type: "POST",
        data:{"data":obj.value},
        success:function(data){
            if(data == "{}"){
                //如果没有值，则隐藏下拉列表
                $(divs).hide();
            }else{
                //格式化数据转换为json格式
                var json = $.parseJSON(data);
                for(var key in json){
                    //判断用户是不是全部自己输入的
                    if(json[key] == obj.value){
                        for(var key in json){
                            $(obj).attr("name",key);
                            $(divs).children().remove();
                            $(divs).hide();
                        }
                    }else{
                        //创建一个div
                        var div = document.createElement("div");
                        $(div).attr("name",key);
                        div.innerText = json[key];
                        //添加样式
                        $(div).addClass("div_div");
                        //添加悬浮事件
                        $(div).hover(
                            function(){
                                $(divs).children().removeClass("border");
                                $(this).addClass("border");
                            },
                            function(){
                                $(this).removeClass("border");
                            }
                        ).click(function(){//添加单击事件
                            var text = this.innerText.substring(this.innerText.lastIndexOf(" ")+1);
                            $(obj).val(text);
                            $(obj).attr("name",$(this).attr("name"));
                            $(divs).children().remove(); 
                            $(divs).hide();
                        });
                        //把div追加到divs中
                        $(divs).append(div);
                    }//判断用户输入结束
                }
                //为第一个添加选中
                $($(divs).children().first()).addClass("border");
            }
            //显示divs
            divs.style.display = "block";
        }
    });
}

<html>
<head></head>
<body><input type="text" id="HAR_H1_NBR" class="div_l_40p" onkeyup="getHospitalInfo(this)" onfocus="onGetFous(this)"></body>
</html>