absolute独立使用之下拉框最佳实践

         

说明：传统的做法是给外部盒子relative定位，再给弹出框absolute定位，而这里我们将absolute独立使用

html

    <div class="search">
        <ul id="result">
            <li><a href="#">分享：CSS深入理解之float浮动</a></li>
            <li><a href="#">案例：CSS圆角进化论</a></li>
            <li><a href="#">案例：CSS Sprite雪碧图应用</a></li>
            <li><a href="#">案例：CSS3 3D 特效</a></li>
        </ul>
        <input type="text" class="search-input" placeholder="课程搜索">
        <a href="javascript:;" class="search-btn">搜索</a>
    </div>

css

        .search{margin:20px;overflow:hidden;}
        .search .search-input{width:200px;line-height:18px; padding:10px; margin:0; border:0 none;font-size:12px;font-family:inherit; float: left; }
        .search.focus{border-color: #2ea7e0; }
        .search .search-input:focus{outline:0 none;}
        .search .search-btn{width:38px;height:38px;float:left;background: url(images/search.png);text-indent:-9em;overflow:hidden; }
        .search.focus .search-btn{background-position:0 -38px;}
        #result{
            display:none;
            position:absolute;
            width:260px;
            margin:39px 0 0 -1px;
            padding-left:0;
            list-style-type:none;
            border:1px solid #e6e8e9;
            background-color:#fff;
            box-shadow:0px 1px 2px #d5d7d8;
            font-size:12px;
        }
        #result>li{line-height:30px;padding-left:12px; }
        #result>li:hover{background-color:#f9f9f9;}
        #result a {display:block;color: #5e5e5e;text-decoration: none; }
        #result a:hover {color:#000; }

javascript

(function() {
    var input = document.getElementsByTagName("input")[0],
        result = document.getElementById("result");

    if (input && result) {
        input.onfocus = function() {
            this.parentNode.className = "search focus";
            if (this.value !== "") {
                result.style.display = "block";
            }
        };
        input.onblur = function() {
            if (this.value === "") {
                this.parentNode.className = "search";
            }
            result.style.display = "none";
        };

        // IE7 that wrap a DIV for avoid bad effect from float
        if (!document.querySelector) {
            var div = document.createElement("div");
            input.parentNode.insertBefore(div, input);
            div.appendChild(result);
        }
        // events of datalist
        if ("oninput" in input) {
            input.addEventListener("input", function() {
                if (this.value.trim() != "") {
                    result.style.display = "block";
                } else {
                    result.style.display = "none";
                }
            });
        } else {
            // IE6-IE8
            input.onpropertychange = function(event) {
                event = event || window.event;
                if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) {
                    if (this.value != "") {
                        result.style.display = "block";
                    } else {
                        result.style.display = "none";
                    }
                }
            };
        }
    }

})();