站内搜索 页面效果

<li class="nav-main-search">
    <form action="search.jsp" method="get" role="search">
      <div class="search-wrap">
        <label for="main-q" class="offscreen"></label> <input
          type="search" id="main-q" name="q" placeholder="搜索课程,视频" /> <a
          class="search-trigger" href="javascript:;"><i
          class="iconfont icon-magnifier"></i></a>
        <button type="submit" class="offscreen">Search</button>
      </div>
    </form>
  </li>

<script>
/**
 * 站内搜索
 */
    (function() {
        var $nav = $("#navbar");
        var $navItems = $nav.children().eq(0);
        var $mainNavSearch = $nav.find(".nav-main-search");
        var $searchWrap = $nav.find(".search-wrap");
        var $searchTrigger = $searchWrap.find(".search-trigger");
        var $input = $searchWrap.find("input");
        var $form = $mainNavSearch.find("form");

        $form.on("submit", function(e) {
            e.preventDefault();
            if (0 == $.trim($(this).find("input").val()).length) {
                alert("搜索关键词不能为空");
                return false;
            }
            this.submit();
        });

        $searchTrigger.on("click", function(e) {
            if ($navItems.css("display") !== "none") {
                $input.get(0).focus();
            } else {
                // 搜索框打开状态
                $form.submit();
            }
        });
        var timeout = null;
        var createExpander = function(isAdd) {
            return function(e) {
                if (isAdd) {
                    $input.select();
                }
                // if ($mainNavSearch.css("display") === "block") {return;}
                if (e)
                    e.preventDefault();
                if (timeout)
                    clearTimeout(timeout);
                timeout = setTimeout(function() {
                    if (isAdd) {
                        $navItems.fadeOut(100, function() {
                            $navItems.css("display", "none");
                            $searchWrap.addClass("expanded");
                            $nav.addClass("expand");
                        })
                    } else {
                        $nav.removeClass("expand");
                        timeout = setTimeout(function() {
                            $searchWrap.removeClass("expanded");
                            $navItems.fadeIn(400);
                        }, 250)
                    }
                });
            }
        };
        $input.on("focus", createExpander(true)).on("blur", createExpander())

        $input.on("keydown", function(e) {
            e = e || window.event;
            if (e.keyCode === 13) {
                $form.submit();
            }
        });
    }).call();
</script>

http://www.whnews.cn/newss/node_14192486.html