Floating Search

floatingsearch.html

<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="floatingSearchWrap">
    <span class="lookup">
        <input type="text" name="s" placeholder="Search..." />
        <button class="clear">
            <img src="search-delete.svg" alt="Click to clear search">
        </button>
    </span>
    <button class="search">
        <img src="search-find.svg" alt="Click to search">
    </button>
</div>
<style>
    #floatingSearchWrap{
        position: fixed;
        right:0;
        top:200px;
        background: #3399FF;
        border-radius: 10px 0 0 10px;
        clear:both;
        padding:0;
        margin:0;
    }
    #floatingSearchWrap .lookup{
        float:left;
        padding:0;
        margin: 5px 0 5px 5px;
        border-radius: 5px;
        border: 4px solid #CCCCB2;
        background: #ffffff;
        width:300px;
        height:32px;
        position: relative;
        display: none;
    }
    #floatingSearchWrap .lookup input{
        border:none;
        outline: 0;
        background: transparent;
        padding:5px 10px;
        line-height: 32px;
        font-size: 20px;
        height:32px;
        float:left;
        width:300px;
        position: absolute;
        left:0;
        top:0;
    }
    #floatingSearchWrap .lookup button{
        background: transparent;
        padding:0;
        margin:0;
        height:32px;
        border:none;
        outline: 0;
        cursor: pointer; cursor: hand;
        overflow: hidden;
        position: absolute;
        right:0;
        top:0;
        width:56px;
        display: none;
    }
    #floatingSearchWrap .lookup button img{
        position: absolute;
        margin-top: -26px;
        left: 0;
        height: 52px;
    }
    #floatingSearchWrap.open .lookup{
        display: block;
    }
    #floatingSearchWrap button{
        background: transparent;
        padding:0;
        margin:0;
        height:50px;
        border:none;
        outline: 0;
        cursor: pointer; cursor: hand;
    }
    #floatingSearchWrap button img{
        height:40px;
        display: inline-block;
        margin: 5px 5px 5px 8px;
    }
</style>
<script>
    var floatingSearchWrap = $('#floatingSearchWrap');
    floatingSearchWrap.find('.lookup input').bind('input', function ( e ) {
        var input = $(this);
        if (input.val()) {
            input.next('.clear').show();
            floatingSearchWrap.trigger('typingSearch', input.val() );
        }
    });
    floatingSearchWrap.find('.lookup button.clear').on('click', function (e) {
        e.preventDefault();
        var clear = $(this);
        var priorValue = clear.prev().val();
        clear.prev().val(null);
        clear.hide();
        floatingSearchWrap.trigger('clearSearch', priorValue);
    });
    floatingSearchWrap.find('> button.search').on("click",function(e){
        var lookup = $(this).siblings('.lookup');
        if( lookup.find('input').val() != '' ){
            floatingSearchWrap.trigger('doSearch', lookup.find('input').val());
        } else {
            lookup.animate({width:'toggle'}).parent().toggleClass('open');
            floatingSearchWrap.trigger('toggleSearch', lookup.parent().hasClass('open') );
        }
    });
    floatingSearchWrap.on('doSearch',function(e, value){
        e.preventDefault();
        console.log('do search:',value);
    });
    floatingSearchWrap.on('typingSearch',function(e,value){
        console.log('typing search:',value);
    });
    floatingSearchWrap.on('toggleSearch',function(e, isOpen ){
        console.log('toggle search:',isOpen);
    });
    floatingSearchWrap.on('clearSearch',function(e, priorValue ){
        console.log('clear search:',priorValue);
    });
</script>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum elit ut dolor pellentesque mollis. Quisque dictum turpis ac est semper, ac auctor dui condimentum. Fusce tristique odio nec nulla placerat, a vehicula risus auctor. Nam ultricies iaculis nisi, ac mattis urna imperdiet nec. Proin egestas ex nec mollis sodales. Maecenas dictum justo eget laoreet scelerisque. Donec a massa sit amet velit feugiat venenatis pellentesque a elit. Aenean eleifend in neque sed pretium. In id ornare eros. Nam vestibulum felis at felis laoreet, quis accumsan ligula cursus. Aenean facilisis sapien at hendrerit sodales.
</p>
<p>
Aenean lacus ligula, elementum ac sem at, viverra pellentesque est. Suspendisse porttitor a dui at vulputate. Aliquam bibendum ut odio non molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sit amet velit quis neque feugiat dapibus. Proin et scelerisque augue. Morbi ut maximus erat. Nunc orci turpis, commodo vel dignissim nec, hendrerit et nisl. Cras sit amet arcu dictum, tempor velit ut, aliquam est. Mauris lobortis, nulla ac blandit volutpat, nulla odio accumsan libero, vitae venenatis metus ipsum non nibh.
</p>
<p>
Suspendisse euismod pulvinar nisl non semper. Aliquam erat volutpat. Sed eget euismod orci. Proin malesuada non ex quis consequat. Donec in finibus magna. Etiam iaculis arcu ac felis vestibulum, a aliquam lectus vulputate. Sed vel volutpat lectus. Suspendisse blandit magna commodo dolor consectetur, vitae finibus nunc varius. Curabitur volutpat, diam et lacinia elementum, nisl ligula pulvinar turpis, quis interdum tortor urna vel metus. Vivamus finibus lacus imperdiet sem sodales, eget sodales arcu molestie.
</p>
<p>
Pellentesque eu mauris semper, cursus urna sed, pellentesque purus. Nunc consectetur, metus vel facilisis consequat, urna orci tempor felis, id luctus quam nunc interdum velit. Quisque facilisis, lectus sed viverra mattis, ligula augue condimentum magna, eget auctor felis ipsum a nunc. Ut sit amet dignissim tortor. Morbi varius, sem sed facilisis consectetur, tortor justo convallis nibh, quis mattis massa arcu sed nunc. Aliquam sit amet ante elit. Nunc et erat nec ante vehicula sagittis. Phasellus congue viverra cursus. Nunc porttitor augue ullamcorper, aliquet lorem ut, hendrerit nisi.
</p>
<p>
Proin in est faucibus, pretium felis in, condimentum justo. Vivamus rhoncus tristique diam at maximus. Quisque id sem gravida, sollicitudin mi et, laoreet ex. Nullam in feugiat ex. Fusce lobortis augue non dui euismod sollicitudin. Etiam venenatis, urna vel bibendum cursus, purus ante congue mi, sit amet suscipit massa tortor sed mauris. Aliquam congue tempor tristique. Donec vitae nibh nec magna tincidunt porta ac sed urna. Suspendisse sed mauris porttitor, viverra ligula id, lacinia erat. Maecenas ut leo elit. Aenean mattis, ante eu porttitor sollicitudin, sem eros rhoncus nunc, nec laoreet quam nibh vitae turpis. Integer pellentesque magna non dui aliquam placerat. Maecenas semper, purus at eleifend pulvinar, orci mauris fermentum libero, a aliquet mauris tellus congue metus. Morbi et faucibus mi, commodo egestas erat. Aliquam nec lacus feugiat ex sodales sagittis at quis est.
</p>
<p>
Phasellus gravida eleifend lacus, non maximus eros rhoncus sed. In condimentum odio lacus, nec pharetra augue pulvinar sed. Vivamus urna leo, mattis imperdiet rhoncus id, hendrerit at massa. Ut enim dolor, rhoncus quis vehicula vel, laoreet non lacus. Etiam placerat a ex in dignissim. Maecenas ac dui volutpat, rutrum lacus eget, bibendum purus. Etiam posuere quis ipsum lacinia tincidunt. In hac habitasse platea dictumst.
</p>
<p>
Proin feugiat, tellus sit amet scelerisque blandit, ipsum mauris egestas purus, sed luctus mauris tellus vel turpis. Mauris ut leo eu massa lacinia faucibus nec ac justo. Vivamus congue lorem ut dapibus commodo. Etiam id massa sit amet orci maximus venenatis sit amet vitae quam. Duis ac diam dui. Sed ex ipsum, volutpat a tellus ac, sollicitudin faucibus libero. Sed ullamcorper aliquam erat, scelerisque tincidunt eros elementum ut. Maecenas feugiat eleifend metus eu congue. Ut id tempor sem, eget pulvinar lorem. Suspendisse ut tortor eget nulla tincidunt commodo.
</p>
<p>
In aliquet, lorem nec ultricies sodales, urna nisi viverra ex, vitae tempor mauris dui vel libero. Integer fermentum porttitor vulputate. Donec faucibus consectetur consequat. Aliquam convallis congue lorem, sed posuere est facilisis in. Aliquam erat volutpat. Proin nec odio erat. Nullam felis diam, tempus accumsan nibh eu, condimentum blandit quam. Nulla egestas faucibus eros eu luctus. Nunc tincidunt mattis metus quis laoreet. Vivamus ac scelerisque purus. Fusce molestie, metus at gravida sagittis, ipsum odio accumsan ipsum, ut consequat ante tortor id dui. Nulla scelerisque dignissim ante at placerat. Etiam non viverra turpis.
</p>
<p>
Vestibulum sed erat sollicitudin, egestas dolor id, aliquet nunc. Sed bibendum dui id faucibus dignissim. Donec dapibus, lorem at aliquet tincidunt, turpis felis gravida magna, vel varius mauris ante sagittis ex. Phasellus vel iaculis mauris. Donec mattis aliquet lorem non tempus. Mauris pretium pulvinar mauris, eu fermentum neque dictum eu. Sed dignissim accumsan ante eu interdum. Morbi eu magna a dolor aliquet egestas a id lectus. Pellentesque fringilla rutrum ultricies. Mauris dignissim felis vel velit commodo, vitae pharetra lorem feugiat. Ut et porttitor tellus. Sed eu sollicitudin arcu.
</p>
<p>
Quisque tempor ut sem ac maximus. Praesent laoreet velit rhoncus sem iaculis pretium. Vestibulum molestie nulla non erat vehicula, at facilisis orci posuere. Curabitur ultrices commodo diam, in condimentum metus feugiat feugiat. Sed ornare felis eros. Vivamus condimentum mauris nec aliquam tincidunt. Vivamus vel finibus ligula, at malesuada diam. Integer eget massa ut eros pretium ultrices non vitae felis. In interdum libero sed mi commodo, a pellentesque est venenatis. Fusce posuere sapien quis ipsum fringilla vulputate. Nunc euismod tellus nec dolor suscipit pharetra. Suspendisse ac luctus dolor. Donec fringilla nulla nec ante venenatis venenatis. Donec non turpis sit amet sapien hendrerit tristique. Aenean vel enim lacinia nibh volutpat vehicula vel eu augue.
</p>
<p>
Mauris ornare tincidunt ipsum at malesuada. Fusce eu augue mauris. Curabitur commodo efficitur sem sed faucibus. Aliquam ultrices, neque fringilla varius pharetra, dolor sem tincidunt neque, et tempor metus tellus sit amet magna. Aliquam at lorem arcu. Aenean vitae massa rutrum, mattis sem sit amet, volutpat nibh. Mauris nec nisl quis neque finibus vulputate ac sed quam. Nunc molestie purus a metus maximus blandit eget sed est. Fusce et pretium lectus. Pellentesque porttitor semper porttitor. Integer eleifend, magna vel sagittis scelerisque, purus nisl scelerisque neque, sit amet feugiat purus nulla non nulla.
</p>
<p>
Nunc sed nisl mi. Nullam luctus vitae nibh quis viverra. Proin laoreet maximus arcu, vel egestas sem mattis nec. Sed nec quam eu mauris vulputate volutpat eget pharetra ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum nunc arcu, ornare non magna at, tristique mollis metus.
</p>
<p>
In ac lectus quis tortor imperdiet volutpat. Vestibulum dui felis, semper ac tempus eget, consequat sed lorem. Fusce fermentum velit ac velit efficitur aliquet. Cras eu bibendum risus. Sed non convallis nunc, sit amet malesuada ligula. Cras pellentesque fringilla nunc, vel ultrices turpis elementum sit amet. Nam a vehicula tellus. Quisque sodales dapibus magna, sit amet scelerisque dolor vulputate eget. Pellentesque hendrerit lobortis risus at condimentum. Maecenas vehicula orci ac vehicula eleifend. Integer vitae interdum arcu. Aenean efficitur molestie massa, eu semper metus viverra nec.
</p>
<p>
Vestibulum gravida velit nec faucibus dapibus. Praesent et felis at nulla posuere tempor. Ut tincidunt pulvinar odio non porttitor. Praesent pharetra, purus ut rhoncus feugiat, nulla velit blandit risus, et finibus elit eros eget erat. Donec ac nulla metus. Vivamus sagittis rhoncus mauris, consectetur elementum purus cursus sed. Ut hendrerit lorem at sem dignissim, at dictum elit pulvinar. Cras elementum tortor eget rhoncus porta.
</p>
<p>
Cras gravida nulla ut ultricies malesuada. Phasellus hendrerit semper posuere. Sed efficitur nulla maximus turpis posuere consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris malesuada mollis velit, nec egestas mauris. Mauris in sem magna. Nulla vitae finibus nunc. Curabitur fringilla ante vehicula, molestie nibh vitae, porta velit.
</p></div>
</body>
</html>

search-delete.svg

search-find.svg