javascript - ul 标签中的键盘快捷键

Question

我有一个<ul>使用 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>';

由于完整的国家/地区列表很长，并且 div 标记中有滚动条，因此我希望用户只需按字母键盘快捷键即可到达某个国家/地区。

我怎样才能做到这一点？

这是一张图片:

Answer 1

要使用 jQuery 来完成此操作(jQuery 建议作为一种简单/可靠的方法来抽象跨浏览器的不一致)，我建议在列表的开头添加一个搜索框，给出以下内容:

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 .