Expandable input box with dropdown arrow

by someprimetime

HTML

<input class="search" type="text" placeholder="Search..." name="blah" />
<div id="arrow" class="drop_arrow">
    <div class="options">
        <ul>
            <li>Products</li>
            <li>Media</li>
            <li>Articles</li>
         </ul>
    </div>
</div>
<input type="button" value="Search" />

CSS

input.search {
    width: 100px;
}
body {height: 600px;}
.drop_arrow {
    cursor: pointer;
    background: transparent url('http://static.s3.beautylish.com/icons/8x10_down_arrow.png') no-repeat;
    width: 8px;
    height: 10px;
    display: inline-block;
    position: relative;
    right: 20px;
    padding: 5px;
    top: 10px;
}
.options {
    border: 1px solid #ccc;
    font-family: arial, helvetica;
    font-size: 12px;
    width: 100px;
    background-color: #fff;
    display: none;
-moz-box-shadow: 2px 2px 5px #c0c0c0;
-webkit-box-shadow: 2px 2px 5px #c0c0c0;
box-shadow: 2px 2px 5px #c0c0c0;
    position: relative;
    bottom: 8px;
    right: 5px;
}
.options li {
    padding: 5px;
}
.options li:hover {
    background-color: #f3f3f3;
}

JavaScript

$(function() {
    var $input = $('input[name=blah]');
    var $arrow = $('#arrow');
    var $options = $('.options');
    var $li = $options.find('li');

    $input.bind('click', function() {
        var that = $(this);
        slideOut(that);
    });

    $input.bind('blur', function() {
        var that = $(this);
        slideIn(that);
    });

    $arrow.toggle(function() {
        $options.show().fadeIn('fast');
    }, function() {
        $options.fadeOut().removeClass("active");
    });
    
    $("body").click(function() {
        $options.fadeOut().removeClass("active");
    });

    $li.click(function(e) {
        var option = $(this).text();
        $input.attr('placeholder', 'Search ' + option);
        $options.hide();
        $input.focus();
        var that = $input;
        slideOut(that);
        event.stopPropagation();
    });

    $li.bind('mouseover', function() {
        $(this).css('font-weight', 'bold');
    }).mouseout(function() {
        $(this).css('font-weight', 'normal');
    });

    function slideIn(that) {
        that.animate({
            width: 100
        }, 250);
    }

    function slideOut(that) {
        that.animate({
            width: 200
        }, 250);
    }
});