Question

I have a <ul> created with PHP:

$WORLD_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:

Answer 1

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.