搜索下拉提示框

 

 div.sug{
            background-color: #FFFFFF;
            border: 1px solid #cccccc;
            border-top: 0;
        }
        div.sug ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        div.sug ul li{
            height: 28px;
            line-height: 28px;
            padding: 0 3px;
            cursor: default;
            color: #666666;
        }
        div.sug ul li:hover, div.sug ul li.active{
            background-color: #19abff;
            color:#FFFFFF;
        }

 

<div style="position: relative">

    <label class="label1" for="" style="margin-left: 41px">科室</label><input class="" type="text" id="department" name="" style="width: 160px"/>

    <div class="sug" id="departmentSug" style="width: 160px;position: absolute;display: none"><!--/*left: 524px;top: 29px;*/-->
        <ul>
            <li>词条1</li>
            <li>词条2</li>
            <li>词条3</li>
            <li>词条4</li>
            <li>词条5</li>
        </ul>
    </div>
</div>

 

    (function(){
        /**
         *
         */
        var searchDropDown ={

            init:function(searchInput,dropDown,searchAjax){
                var isOldTargetValueActive = true,oldTargetValue = "";

                dropDown.css({"left":searchInput[0].offsetLeft,
                    "top":searchInput[0].offsetTop + searchInput[0].offsetHeight
                });

                searchInput.on("keyup",function(e){

                    var event = e || window.event,
                        sugDisplay = dropDown.css("display"),
                        sugLi = dropDown.find("li"),
                        liLength = sugLi.length,
                        currentActiveLi = null,
                        i=0;

                    if( (event.keyCode == 40 || event.keyCode == 38) && (sugDisplay=="" || sugDisplay =="block")){
                        if(event.keyCode == 40){  // 向下键
                            for(i=0;i<liLength;i++){
                                if(sugLi.eq(i).hasClass("active")){
                                    isOldTargetValueActive = false;
                                    if(i<(liLength-1)){
                                        currentActiveLi = sugLi.eq(i+1);
                                    }else{
                                        currentActiveLi = null;
                                    }
                                    break;
                                }else{
                                    isOldTargetValueActive = true;
                                }
                            }
                            if(isOldTargetValueActive && currentActiveLi == null){
                                currentActiveLi = sugLi.eq(0);
                                isOldTargetValueActive = false;
                            }
                        }else if(event.keyCode == 38){  //向上键
                            for(i=0;i<liLength;i++){
                                if(sugLi.eq(i).hasClass("active")){
                                    isOldTargetValueActive = false;
                                    if(i>0){
                                        currentActiveLi = sugLi.eq(i-1);
                                    }else{
                                        currentActiveLi = null;
                                    }
                                    break;
                                }else{
                                    isOldTargetValueActive = true;
                                }
                            }
                            if(isOldTargetValueActive && currentActiveLi == null){
                                currentActiveLi = sugLi.eq(liLength-1);
                                isOldTargetValueActive = false;
                            }
                        }
                        sugLi.removeClass("active");
                        if(currentActiveLi){
                            currentActiveLi.addClass("active");
                            searchInput.val(currentActiveLi.html());
                        }else{
                            searchInput.val(oldTargetValue);
                        }

                    }else if(event.keyCode == 13){
                        dropDown.css("display","none");
                    }else{

                        isOldTargetValueActive = true,oldTargetValue = searchInput.val();
                        searchAjax();
                    }

                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble = true;
                    }
                });
                searchInput.on("focus",function(e){

                    if(dropDown.find("li").length){
                        dropDown.css("display","block");
                    }

                });
                searchInput.on("click",function(e){

                    var event = e || window.event;

                    if(dropDown.find("li").length){
                        dropDown.css("display","block");
                    }

                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble = true;
                    }
                });
                dropDown.on("click",function(e){
                    var event = e || window.event;
                    var target = event.target || event.srcElement;
                    searchInput.val($(target).html());
                });
                $(document).on("click",function(e){
                    dropDown.css("display","none");
                });

            }
        };

        window.searchDropDown = searchDropDown;

    })();

    searchDropDown.init($("#department"),$("#departmentSug"),searchAjax1);


    function searchAjax1(){
        //todo 请求后台搜索词条
        var sugs = [],stringSource = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",len = stringSource.length,html="";
        for(var j=0;j<5;j++){
            var str="";
            for(var i=0;i<10;i++){
                var index = Math.floor(Math.random()*len);
                str += stringSource[index];
            }
            sugs.push(str);
        }

        sugs.forEach(function(item){
            html += \'<li>\'+item+\'</li>\'
        });

        $("#departmentSug ul").html(html);
        $("#departmentSug").css("display","block");
    }