Hộp tìm kiếm (Search box) với hiệu ứng jQuery

Chia sẽ đoạn code tạo một hộp tìm kiếm với hiệu ứng jQuery đẹp mắt.
Ban đầu, hộp tìm kiếm được hiển thị dưới dạng biểu tượng một kính lúp, và khi click vào biểu tượng đó hộp tìm kiếm sẽ được xuất hiện

Dưới đây là code của ví dụ này:
HTML

<form class="search-form" action="/search" method="get">
    <div class="input-wrapper">
        <input type="text" name="q" placeholder="Tìm kiếm...">
        <a title="Tìm kiếm" class="sc" href="/"></a>
    </div>
</form>

CSS

.input-wrapper {
  border:1px solid #B9E8FB;
  width:26px;
  height:26px;
  background-color:white;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  overflow:hidden;
  position:relative;
}

.input-wrapper input,
.input-wrapper input:focus {
  border:none;
  background:none;
  margin:0 0;
  padding:0 5px;
  display:block;
  width:200px;
  height:26px;
  font:normal normal 12px/26px Arial,Sans-Serif;
  color:#1C86AF;
  outline:none;
}

.input-wrapper.focus {
  background-color:#FFFFFF;
  border-color:#3EBFF0;
}

.input-wrapper .sc {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

jQuery

<script type="text/javascript">
$(function() {
    $('.search-form .sc').on("click", function() {
        $(this).hide()
            .parent().addClass('focus')
                .stop().animate({width:200}, 120, "swing")
                    .find('input').trigger("focus")
                        .on("focusout", function() {
            $(this).next().show()
                .parent().removeClass('focus')
                    .stop().animate({width:26}, 120, "swing");
        });
        return false;
    });
});
</script>

Xem Demo