Question

我使用PHP创建了<ul>：

$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标签中有滚动条，因此我希望用户只需按下字母键盘快捷键即可访问某个国家/地区。

我该如何做到这一点？

这是一张图片：

alt text

Answer 1

是的，您需要客户端脚本。

您可以将accesskey属性添加到a节点，并将href属性指向无序列表。

用户仍然需要修饰符，但这是执行此操作的标准方法。

Answer 2

为什么不使用<select>元素？

例如：

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

<select>元素内置了一种字母数字跳转功能。您可以在所有国家/地区都有一个下拉菜单，而不是提交按钮。

如果您使用列表跳转到新页面，那么您只需阅读$_POST['country']的值并重定向到它适用的任何页面。

如果您只是使用它跳转到页面上的其他位置，则在提交表单时运行一些javascript，读取选择的值，然后跳转到页面上的该位置。

Answer 3

要使用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

Answer 4

这可以在不使用jQuery更改当前布局的情况下完成。这是粗略的例子：

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

这应该将DIV滚动到带有键入字母的<li> strarting的位置。

ul标签中的键盘快捷键

4 个答案:

HTML：

jQuery的：