Javascript 如何使用箭头键实现之间的导航？

我正在制作自己的组合框，以获得比标签更好的设计

顺便说一句，我想知道，如何使用键盘上的箭头键在或其他之间进行导航，并使用tab键显示建议。就像标签的形状一样

这就是我想让它发挥作用的地方：

HTML

JS

您可以在此处进行测试：

编辑示例：例如，单击输入中的或制表符，然后使用箭头键导航。。。它不起作用

---

任何帮助都将不胜感激。

我为uparrow和downarrow编写了一个键下处理程序，其作用类似于选择下拉。然而，tab键在切换到下一个字段时有一个特定的角色，所以我不想阻止默认的浏览器行为。请参阅下面的代码，您可以从中构建更多代码

CSS:

JS:

---

有很多自定义的select jQuery插件。。将实现所有默认的选择功能。这么轻的东西。。谢谢，但我不想要任何插件。我想自己做：-太棒了！但是span没有获得任何焦点，所以我认为不能用enter键更新输入。对于制表，我找到了一个包含输入的解决方案…，我已经在您的解决方案中实现了它，但是制表符和箭头的作用不同，请看这里：@Valky使用输入字段作为选项不是建议的方法。我们可以为回车键做一些事情。我想一下。顺便问一下，您希望tab的行为如何。在常规选择框中，选项卡不会跳转到下一个选项。。它跳转到下一个输入字段。是的，你说得对，我有点疯了！选项卡只需显示div，如单击主输入和箭头以选择字段。然后单击或enter键删除将值发送到主输入。@Valky请参阅enter键按下的更新代码，并且keydown/keyup将动态更新文本框值。这很完美，我现在可以更改其中的一些功能。谢谢。我还更改了主题的标题。。。

<input type="text" id="myInput" value=""/>
<div id="myDiv">
    <span>Value 1</span>    
    <span>Value 2</span>
    <span>Value 3</span>
</div>

#myDiv {display:none;border:1px solid #000;}
span  {display:block;background:#EDEDED;cursor:pointer;}
span:hover {background:#555;color:#FFF;}

$(document).ready(function(){
    $('#myInput').focus(function(){
        $('#myDiv').slideDown();
    });    

    $('span').click(function(){
         $('#myInput').val($(this).html());
         $('#myDiv').slideUp();
    });
});​

span.active {background:#555;color:#FFF;}

$(document).ready(function() {
    $('#myInput').focus(function() {
        if ($('#myDiv span.active').length == 0) {
            $('#myDiv span:first').addClass('active');
        }
        $('#myDiv').slideDown();
    }).focusout(function() {
        $('#myDiv').slideUp();
    });
    $('span').click(function() {
        $('#myInput').val($(this).html());
    }).mouseenter(function() {
        $('#myDiv span').removeClass('active');
    }).keydown(function(e) {
        alert(e.which);

    });

    //keydown event
    $('#myInput').keydown(function(e) {
        var $actvOpt = $('#myDiv span.active');
        if (e.which == 13) { //enter key
            if ($actvOpt.length != 0) {
                $(this).val($actvOpt.text());
                $('#myDiv').slideUp();
            }
            return;
        }

        var actvIndex = $actvOpt.removeClass('active').index();
        var optCount = $('#myDiv span').length;

        if (e.which == 40) { //keydown
            actvIndex += 1;
        } else if (e.which == 38) { //keydown
            actvIndex -= 1;
        }

        if (actvIndex < 0) actvIndex = optCount - 1;
        else if (actvIndex >= optCount) actvIndex = 0;

        $('#myDiv span:eq(' + actvIndex + ')').addClass('active');

        $actvOpt = $('#myDiv span.active');
        $(this).val($actvOpt.text());        
    });
});