keyboard shortcuts in a ul tag

I have a <ul> created with PHP:

$W开发者_如何转开发ORLD_STATES =
     array(
        "France",
        "Germany", 
        "Greece",
        "Greenland",
        "United Kingdom",
        "United States", 
        "Uruguay"
     );

echo '<ul>';
for($i=0; $i<sizeof($WORLD_STATES); $i++){
    echo '<li rel="' . $WORLD_STATES[$i] . '">'.$WORLD_STATES[$i].'</li>';
}

echo '</ul>';

Since the full list of countries is very long, with a scrollbar in a div tag, I want the user to be able to reach a country by simply pressing an alphabetic keyboard shortcut.

How can I accomplish this?

this is an image:

To do this with jQuery (jQuery suggested as an easy/reliable way to abstract away cross-browser inconsistencies), I suggest adding a search box to the beginning of the list, giving the following:

html:

<ul>
    <li><input type="text" name="search" id="search" /></li>
    <li>Armenia</li>
    <li>Belgium</li>
    <li>China</li>
    <li>Denmark</li>
    <li>Estonia</li>
    <li>France</li>
    <li>Germany</li>
    <li>Holland</li>
    <li>Ireland</li>
    <li>Japan</li>
    <li>Luxembourg</li>
    <li>Monaco</li>
    <li>Netherlands</li>
</ul>

jQuery:

$('#search').keyup(
    function(e){
        var string = $(this).val();
        if (string.length > 0){
            $('ul li:contains(' + string + ')')
                .addClass('result');
            $('.result')
                .not(':contains('+ string + ')')
                .removeClass('result');
        }
        else {
            $('.result').removeClass('result');
        }
    });

JS Fiddle demo.

Yes you need client side script.

You could add the accesskey attribute to an a node, and point the href attribute to the unordered list.

Users would still need modifiers though, but it's the standard way to do it.

Why not use a <select> element instead?

For example:

<select name="country" id="country">
   <option>United States</option>
   <option>United Kingdom</option>
</select>

The <select> element has the sort of alphanumeric jump functionality built in. You could have a dropdown with all of your countries, with a submit button instead.

If you're using your list to jump to a new page, then you could just read the value of $_POST['country'] and redirect to whichever page it applies to.

If instead you're just using it to jump to some other location on the page, you run some javascript when the form is submitted, read the value of the select, and jump to that location on the page.

This can be done without changing your current layout using jQuery. Here is crude example:

$(document).keypress(function (event) {
    var key = String.fromCharCode(event.which);
    $("#Container li").each(function (index) {
        var text = $(this).text();
        if (text.length > 0 && text.charAt(0).toLowerCase() == key.toLowerCase())
        {
            $("#Container").scrollTop($(this).position().top);
            break;
        }           
    });
});

This should scroll the DIV to the position of the <li> strarting with the typed letter.