jQuery箭头键导航

Question

我有这些文本框和下拉菜单，用于类似Facebook的自动建议：

<input type="text" id="search" name="search_fld"/>

<div id="display">
<div class="display_box">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

我的CSS：

.display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

我怎样才能通过在输入框“search_fld”中使用向下箭头键来将“悬停”状态传递到第一个“display_box”，以此类推，以及所有“显示”div？ 这里是jsfiddle代码链接。

- luca

Answer 1

你无法完美地模拟鼠标悬停状态。没有办法避免添加一个带有相同样式的“真实”类：

.display_box_hover, .display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

现在这段代码将会“遍历”这些元素：

window.displayBoxIndex = -1;

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".display_box");
    if (displayBoxIndex >= oBoxCollection.length)
         displayBoxIndex = 0;
    if (displayBoxIndex < 0)
         displayBoxIndex = oBoxCollection.length - 1;
    var cssClass = "display_box_hover";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}

这将“记住”上一次“选定”元素的索引，并使用eq()函数切换到下一个或上一个元素，同时将上面的类添加到该选定元素中。

更新的 jsFiddle。

- Shadow Wizard Chasing Stars

---

如果你能做到，老实说...那会比我的好多了。 - S L

"class"是一个保留名称。你必须更改该变量名称，否则它在jsfiddle上无法工作。工作版本：http://jsfiddle.net/supertrue/MKZSE/51/ - supertrue

@supertrue 没错，当我写这段代码时它是可以工作的，可能后来 class 被标记为保留字了。虽然没有收到你的评论通知，但迟到总比不到好！ :-) - Shadow The Spring Wizard

我知道这是2012年的内容，但是你当时如何在按下“Enter”键时选择元素？ - ClosDesign

@Carlos 处理 keyCode 13 的问题很简单，可以参考这个 fiddle。你可以通过 AJAX 或其他方式发送选定的值，而不是弹出警告框。 :) - Shadow The Spring Wizard

Answer 2

当然，它看起来很丑。在这里可以看到示例（链接）。

<script src="jquery.js"></script>

<script>
$(function (){

        $('.display_box').hover(function (){            
            $(this).attr('class', 'display_box current')
        }, function (){
            $(this).attr('class', 'display_box');
        });

        $('#search').keyup(
            function (e){
                var curr = $('#display').find('.current');
                if (e.keyCode == 40) 
                {                                   
                    if(curr.length)
                    {
                            $(curr).attr('class', 'display_box');
                            $(curr).next().attr('class', 'display_box current');
                    }
                    else{
                        $('#display div:first-child').attr('class', 'display_box current');
                    }                   
                }
                if(e.keyCode==38)
                {                                       
                    if(curr.length)
                    {                           
                            $(curr).attr('class', 'display_box');
                            $(curr).prev().attr('class', 'display_box current');
                    }
                    else{
                        $('#display div:last-child').attr('class', 'display_box current');
                    }           
                }
            }       
        )

    });
</script>
<style>
.current{
  background:#3b5998;
  color:#FFFFFF;
}
</style>

<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

- Santosh Linkha

---

和我想的一样，只是实现方式不同。 :) - Shadow The Spring Wizard

Answer 3

为了实现自动建议文本框，最好使用以下的“datalist”标签：

<input list="search" name="search_fld"/>
  <datalist id="search">
     <option value="Luca"/>
     <option value="David"/>
     <option value="Mark"/>
  </datalist>

从这里获得有关datalist标签的更多详细信息：http://www.w3schools.com/tags/tag_datalist.asp

- Ankit

Answer 4

你可以使用CSS将箭头键作为输入字段的背景，或者使用覆盖在输入字段上的带有箭头背景图像的叠加层，并在悬停状态下使用CSS或JS使其可见。

- thecodeparadox