Navigate through list with up/down arrows

问题:

Find the JSFiddle here: http://jsfiddle.net/aP5A3/1/

I'm trying to build a way for a user to navigate through the items of a list #cityresults by navigating with the up/down arrows. When a user clicks the arrow down I want to apply class activedropdownitem on the active list item, and when he presses Return button while on that item I want to execute the same logic as when a user clicks with the mouse on that item, so in function $('#cityresults').on('click', 'a', function ().

I copied a Navigate function from another site, but have no idea how to properly implement it.

<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

     }

 });

回答1:

OK so I'll post the code and example for you then type the explanation so you can have something while you wait. In the demo, make sure to click inside the display area or it won't capture your key presses (since JSFiddle uses an 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);
        }
    });
});

No change to the rest of the code.