使用向上/向下箭头浏览列表

Question

在这里找到 JSFiddle：http://jsfiddle.net/aP5A3/1/

我正在尝试构建一种方式，让用户通过使用向上/向下箭头导航来浏览列表 #cityresults 的项目。 当用户单击向下箭头时，我想在活动列表项上应用 activedropdownitem 类，当他在该项目上按下 Return 按钮时，我想执行与用户用鼠标单击时相同的逻辑 在那个项目上，所以在函数$('#cityresults').on('click', 'a', function ()。

我从另一个站点复制了一个Navigate 函数，但不知道如何正确实现它。

<input id="city" name="city" maxlength="50" autocomplete="off" class="textbox">
<input id="citygeonameid" name="citygeonameid" type="hidden">
<div id="cityresultscontainer">
    <div id="cityresults" style="display: block;">
        <ul>
        <li data-id="2750053"><a href="#" title="Nijmegen"><strong>Nij</strong>megen, Gelderland</a></li>
        <li data-id="2750065"><a href="#" title="Nijkerk"><strong>Nij</strong>kerk, Gelderland</a></li>
        <li data-id="2750089"><a href="#" title="Nijemirdum"><strong>Nij</strong>emirdum, Friesland</a></li>
        <li data-id="2750098"><a href="#" title="Nijega"><strong>Nij</strong>ega, Friesland</a></li>
        <li data-id="2990366"><a href="#" title="Nijon"><strong>Nij</strong>on, Champagne-Ardenne</a></li>
        <li data-id="2750094"><a href="#" title="Nijehaske"><strong>Nij</strong>ehaske, Friesland</a></li>
        <li data-id="2750104"><a href="#" title="Nij Altoenae"><strong>Nij</strong> Altoenae, Friesland</a></li>
        <li data-id="2750103"><a href="#" title="Nij Beets"><strong>Nij</strong> Beets, Friesland</a></li>
        <li data-id="8449187"><a href="#" title="Nijang"><strong>Nij</strong>ang, Nusa Tenggara Barat</a></li>
        <li data-id="2513222"><a href="#" title="Nijar"><strong>Nij</strong>ar, Andalusia</a></li>
        <li><span>Too many results? Refine your selection   </span></li>
        </ul>
    </div>
</div>



var Navigate = function (diff) {
     displayBoxIndex += diff;
     var oBoxCollection = $("#cityresults");
     if (displayBoxIndex >= oBoxCollection.length)
         displayBoxIndex = 0;
     if (displayBoxIndex < 0)
         displayBoxIndex = oBoxCollection.length - 1;
     var cssClass = "display_box_hover";
     oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
 }

 window.displayBoxIndex = -1;
 $('#cityresults').on('click', 'a', function () {
     $('#city').val($(this).text());
     $('#cityresults').hide('');
     $('#citygeonameid').val($(this).parent().attr('data-id'));
     return false;
 });             

 $("#city").keyup(function (e) {
     if (e.keyCode == 37 || e.keyCode == 39) {
         return;
     }

     if (e.keyCode == 40) {
         //down arrow
         Navigate(1);
     }
     if (e.keyCode == 38) {
         //up arrow
         Navigate(-1);
     }

     if ($("#city").val().length > 1) {
        //here an ajax search is done

     }

 });

Answer 1

好的，我会为您发布代码和示例，然后键入说明，以便您在等待时可以有所收获。在演示中，请确保在显示区域内单击，否则它不会捕获您的按键（因为 JSFiddle 使用 iframe）。

Useful demo

Javascript：

$(document).ready(function () {
    window.displayBoxIndex = -1;
    $('#cityresults').on('click', 'a', function () {
        $('#city').val($(this).text());
        $('#cityresults').hide('');
        $('#citygeonameid').val($(this).parent().attr('data-id'));
        return false;
    });
    var Navigate = function (diff) {
        displayBoxIndex += diff;
        var oBoxCollection = $("#cityresults ul li a");
        if (displayBoxIndex >= oBoxCollection.length) {
            displayBoxIndex = 0;
        }
        if (displayBoxIndex < 0) {
            displayBoxIndex = oBoxCollection.length - 1;
        }
        var cssClass = "display_box_hover";
        oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
    }
    $(document).on('keypress keyup', function (e) {
        if (e.keyCode == 13 || e.keyCode == 32) {
            $('.display_box_hover').trigger('click');
            return false;
        }
        if (e.keyCode == 40) {
            //down arrow
            Navigate(1);
        }
        if (e.keyCode == 38) {
            //up arrow
            Navigate(-1);
        }
    });
});

其余代码不变。