Navigate Arrow Keys

by dceast

HTML

<div class="search-box">
    <div class="search-bar">
        <input type="text" value="Search" id="search" placeholder="Search" />
    </div>
    <div class="search-results">
        <div id="results-box" class="results-box">
            <ul id="results-list">
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
            </ul>       
        </div>
    </div>
</div> <!-- / .search-box -->

CSS

.search-box
{
    background: #FEFEFE;    
    border: 2px solid #3e6ac8;
    float: left;       
    height: 306px;
    width: 245px;
    margin-right: 10px;    
}

    .search-box .search-bar
    {
        border: 2px solid #3e6ac8;
    }
    
    .search-box .search-bar input[type='text']
    {
        color: #AAA;
        margin: 5px;
        width: 160px;
    }
    
    .search-box .search-bar .btn-group
    {
        cursor: pointer;
        float: right;
        margin: 5px;
    }
    
    .search-box .search-bar .btn-group li a:hover
    {
        background: #3e6ac8;
    }    
    
    .search-box .search-bar .btn-group li a:active
    {
        background: #424fa8;
    }        
   
    .search-box .search-results
    {
        background: #FEFEFE;
        border: 2px solid #3e6ac8;
        height: 260px;
    }
    
        .search-box .search-results .results-box
        {
            border: 1px solid #FFF;
            height: 256px;
            width: 238px;
        }    

        .search-box .search-results ul
        {
            height: 254px;
            width: 235px;
            border: 2px solid #AAA;
            list-style-type: none;
            margin:0;
            overflow: auto;
        }

        .search-box .search-results ul li
        {
            cursor: pointer;
            padding-top: 3px;
            padding-left: 5px;
            padding-bottom: 3px;
        }    
       
        .search-box .search-results ul li:hover
        {
            background: #EEE;
        }       
        
        .search-box .search-results ul li.active
        {
            background: #BBB;
        }
         
        .search-box .search-results ul p
        {
            font-family: 'Open Sans', Arial, Sans-Serif;
            padding: 5px;
        }

JavaScript

$(function(){

    var $results = $('ul li', '#results-box');
    var $lis = $('ul', '#results-box').children();
    var $hidden = $('#hidden');
    var $search = $('#search');
    

    
    $results.live("click", function (e) {
       $lis.filter('.active').removeClass('active');
        
        // add the class
        var $active = $(this);
        $active.addClass('active');
        
        var index = $active.attr('order');
        $hidden.attr('value', index);  
    });
    
    

    deflectEvent = function(event) {
        var noOfListItems = parseInt($lis.length-1);
        var curListItem = parseInt($hidden.attr('value'));        
        if(event.which == 38) {     
            
            var activeID = parseInt($lis[curListItem-2].id);   
            if (activeID <= noOfListItems) {  
                $lis.filter('.active').removeClass('active'); 
                var $active = $('#' + activeID);
                var id = $active.attr('id');
                $active.addClass('active');
                $hidden.attr('value', id);
            }

        }
        if(event.which == 40){    
            curListItem +=1;                
            if (curListItem <= noOfListItems) {  
                $lis.filter('.active').removeClass('active'); 
                var $active = $lis.eq(curListItem);
                $active.addClass('active');
                $hidden.attr('value', curListItem);
            }
            
        }
    }
  
    jQuery(function($){$('#input1').bind('keydown',deflectEvent)});
  
   
    
});