在jquery li搜索函数上添加keydown

Question

下面的jQuery函数搜索ul列表。我尝试做的是添加一个功能，以便用户可以使用向上/向下箭头键导航列表并按Enter键导航到列表项URL。在我的尝试（未显示）中，我无法选择只有可见的物品，有人可以帮我吗？

FIDDLE： https://jsfiddle.net/wzcv2j8v/

HTML

 <nav class="navbar" role="navigation">

        <div class="collapse navbar-collapse" id="uNav">
            <ul class="nav navbar-nav">

                <li class="dropdown">
                   <a href="#" class="dropdown-toggle hidden-lg hidden-md" data-target="#" data-toggle="dropdown">Brands <b class="caret"></b></a>

                    <ul class="dropdown-menu pt-dd animated fadeIn" id="brand-ul">
                        <span class="dd-search"> <input class="form-control" id="bnd-search" type="text" placeholder="Search" /></span>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                    </ul>

                </li>


                <li class="dropdown">
                    <a href="#" class="dropdown-toggle hidden-lg hidden-md" data-target="#" data-toggle="dropdown">Categories <b class="caret"></b></a>

                    <ul class="dropdown-menu pt-dd animated fadeIn" id="mer-ul">
                        <span class="dd-search"> <input class="form-control" id="mer-search" type="text" placeholder="Search" /></span>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                    </ul>

                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle hidden-lg hidden-md" data-target="#" data-toggle="dropdown">Categories <b class="caret"></b></a>

                    <ul class="dropdown-menu pt-dd animated fadeIn" id="cat-ul">
                        <span class="dd-search"> <input class="form-control" id="cat-search" type="text" placeholder="Search" /></span>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                    </ul>

                </li>

            </ul>

        </div>

    </nav>

的jQuery

 $(document).ready(function() {
 // Nav Search
    var brandSearch = $("#bnd-search");
    var catSearch = $("#cat-search");
    var merSearch = $("#mer-search");

    $([brandSearch, catSearch, merSearch]).each( function(){

        var children = $(this).parents(".dropdown-menu").children("li");

        $(this).keyup(function(){
            var valThis = $(this).val().toLowerCase();
            if(valThis == "") {
                $(children).show();
            } else {
                $(children).each(function(){
                    var text = $(this).text().toLowerCase();
                    if (text.indexOf(valThis) >= 0) {
                        $(this).removeClass("hidden");
                        $(this).addClass("active")
                    } else {
                        $(this).removeClass("active");
                        $(this).addClass("hidden");
                    }

                });
             }
          });

        });
    });