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

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);
        }
    });
});

不改变其余代码。