类似百度搜索框关联查询

于关联查询，找了很多方法，可都不尽人意，最后参考了好心网友提供的代码加上自己的实际需求，于此记录。

首先，html

<input type="search" value="" name="curOrganName"  placeholder="请填写" id="cl_obj" autocomplete="off" class="inputs paddingleft">
<input type="hidden" name="yd_mc" class="cl_pub" id="cl_obj1">
<input type="hidden" name="currentdeptcode" id="currentdeptcode" value="">
<div id="auto_obj"></div>

js

    var autoNode1=$("#auto_obj") ;
	//一开始加载方法
    var highlightindex = -1;///高亮显示的变量值(0-n) 初始-1即无任何 子div被选中
    var timeout;///服务器交互延迟
    var wordInput1 = $("#cl_obj");//搜索的input输入框

    var card_id = "";
    
    wordInput1.keyup(function (event)//键盘按下
    {
        nameInput(wordInput1, autoNode1);
    });


    function nameInput(word_obj, obj_node) {
        var textInput1 = word_obj.val(); //输入框输入的值
        var myEvent = event || window.event; 	//不同浏览器选不同事件
        var keyCode = myEvent.keyCode;///键盘按下的值
        var outDivHeight = obj_node.height()-20;//获取父级div的高度,用于控制滚动条滚动

        if (word_obj.val() != "") //输入不为空
        {
            if (keyCode == 38 || keyCode == 40) { //键盘向上或向下移动
                var autoNode1s = obj_node.children();///获取autoNode1s div下的所有子节点
                if (keyCode == 38)//向上
                {
                    if (highlightindex != -1)//不为-1 原来有节点被选中
                    {
                        if(highlightindex==0){

                        }else{
                            word_obj.val($(this).attr("description"));//赋值给输入框
                            autoNode1s.eq(highlightindex).css("background-color", "white");//改变原来背景色 白色
                            highlightindex--; //减一 向上移到

                            var innerHeight = autoNode1s.eq(highlightindex).position().top||0;
                            if(innerHeight < 35){//当前显示的单位距离父级div的高度若小于子div的高度（35是我这里的一个子div高度），则滚动条向上滚动
                                var scrollheight = obj_node.scrollTop();
                                obj_node.scrollTop(scrollheight-200);
                            }
                        }
                    }
                    if (highlightindex == -1) { //为-1 即原来值为0到顶端了
                        highlightindex = autoNode1s.length - 1;//直接把变量改为最后一个 (注意长度length是1-n，而highlightindex 0-n）
                    }
                    autoNode1s.eq(highlightindex).css("background-color", "#ACD6FF");//改变新选中的div背景色 蓝色
                    word_obj.val(autoNode1s.eq(highlightindex).attr("description")); //直接赋值给输入框
                    
               
       $("#currentdeptcode").val(autoNode1s.eq(highlightindex).attr("dept_code"));
                } else if (keyCode == 40)//向下
                {
                    if (highlightindex != -1)//不为-1 原来有节点被选中
                    {
                        if(autoNode1s.length == (highlightindex+1)){

                        }else{
                            autoNode1s.eq(highlightindex).css("background-color", "white");//改变原来选中div背景色
                            highlightindex++; //加1 即向下移动

                            var innerHeight = autoNode1s.eq(highlightindex).position().top||0;
                            if(innerHeight >= outDivHeight){//当前显示的单位距离父级div的高度若大于等于父级div的高度，则滚动条滚动
                                var scrollheight = obj_node.scrollTop();
                                obj_node.scrollTop(scrollheight+200);
                            }
                        }
                    }

                    if (highlightindex == -1)//为-1及可加
                    {
                        highlightindex++;
                    }

                    autoNode1s.eq(highlightindex).css("background-color", "#ACD6FF"); //改变背景色
                    word_obj.val(autoNode1s.eq(highlightindex).attr("description")); 直接赋值给输入框
                    $("#currentdeptcode").val(autoNode1s.eq(highlightindex).attr("dept_code"));
                }

            } else if (keyCode == 13)//回车
            {
                //此处可对回车输入的值作验证

                obj_node.hide();//隐藏div
                highlightindex = -1;//高亮变量恢复默认值
            } else {
                clearTimeout(timeout);//清空前一次的倒数时间
                if (keyCode != 13) { //没有按回车键
                    timeout = setTimeout(function () { ///延迟与服务器交互时间提高效率
                        getDateName(textInput1, obj_node, word_obj);
                    }, 500);///延时方法结束
                }
            }

        } else { ///输入为空隐藏div节点autoNode1 不与服务器交互
            obj_node.hide();
            highlightindex = -1;
        }
    }


    function getDateName(txtInput, obj_node, word_obj) {
        $.post( "get_organdata", {"input": txtInput}, function (data) {//与服务器交互 采用xml返回格式
            var searchs = JSON.parse(data);//获取返回值节点
            obj_node.html("");//清空内容防止div里面重复
            //判断是否查询到数据
            if(searchs.length==0){
                $("#currentdeptcode").val('');
            }
            if (searchs.length > 0) {
                for (var i = 0; i < searchs.length; i++) {
                    var NewNode = $("<div>").attr("id", searchs[i].description);//新建一个div节点 并给以id属性且等于i值
                    var NewNode = $("<div>").attr("dept_code", searchs[i].seq_no);
                    NewNode.attr("description", searchs[i].description);
                    NewNode.html(searchs[i].description).appendTo(obj_node);//把word节点的内容赋给div节点 并把div追加到（相当于内容插入） autoNode1节点的div

                    NewNode.hover(//鼠标事件
                        function () {///鼠标移到
                            if (highlightindex != -1) {	///鼠标键盘一起用时防止同时高亮
                                obj_node.children().eq(highlightindex).css("background-color", "white");
                            }
                            word_obj.val($(this).attr("description"));//赋值给输入框
                            $("#currentdeptcode").val($(this).attr("dept_code"));
                            highlightindex = $(this).attr("id"); //把id值赋给highlightindex
                            $(this).css("background-color", "#ACD6FF");
                        },
                        function () {///鼠标移走
                            $(this).css("background-color", "white");
                        }
                    );
                    NewNode.click(function () {///点击鼠标时
                        word_obj.val($(this).attr("description"));//赋值给输入框

                        $("#currentdeptcode").val($(this).attr("dept_code"));
                        var curDeptcode=$(this).attr("dept_code");
                        var orDeptcode='';
                        $.post("getCurrentDeptCode",function (rs) {
                            orDeptcode=rs;
                            if(curDeptcode==orDeptcode){
                                layer.msg('原档案室名称与转入档案室名称重复，<br>请重新输入！', {
                                    time: 2500, //2s后自动关闭
                                });
                                $("#cl_obj").val("").focus();
                            }
                        },"text");

                        obj_node.hide();
                        highlightindex = -1;
                    });
                }
            }
            if (searchs.length ) ///有返回值才显示
            {
                obj_node.show();
            }
            else {///返回为空隐藏
                obj_node.hide();
            }
        });///.post里的方法结束
    }

ps:原先没有对键盘的上下移动而控制div的滚动条随之移动，后面增加了，效果图如下。