JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<input type="text" value="" id="search-input"/>

<div class="bs-docs-example">
    <div class="dropdown clearfix">
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
            <li><a href="#" class="search-option" >Texto</a></li>
            <li><a href="#" class="search-option">Texto</a></li>
            <li><a href="#" class="search-option">Texto</a></li>
            <li><a href="#" class="search-option">Texto</a></li>
        </ul>
    </div>
</div>

CSS

a.search-option { text-decoration: none;}
.search-option:focus, .search-option:hover { background: #999; color: #FFF;}

JavaScript

$(".bs-docs-example").hide();

$("#search-input").keydown(function(e){
    $(".bs-docs-example").show();
    if(e.which == 40) { // enter
        //setTimeout(function(){
            $(".search-option:first").focus();
        //},1);
     }
});

$(".search-option").keydown(function(e){
    if(e.which == 40) { // down
        $(this).parent().next().find(".search-option").focus();
        return false; // stops the page from scrolling
    }
    if(e.which == 38) { // up
        $(this).parent().prev().find(".search-option").focus();
        return false; // stops the page from scrolling
    }
    if(e.which == 13) { // enter
        alert("Do something");
    }
});