Jquery箭头键导航
Jquery箭头键导航
提问于 2011-04-04 19:49:24
我有这些文本字段和下拉菜单的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“的”悬停“状态，以此类推？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-04-04 20:55:11
您不能完美地模拟悬停状态。添加具有相同风格的“真正”类是无法避免的：
.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()函数并将上面的类添加到该选定元素。
Stack Overflow用户
发布于 2011-04-04 20:47:34
当然是丑陋的。在fiddle here上。
<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>Stack Overflow用户
发布于 2013-06-12 03:17:17
为了实现自动提示文本字段，最好使用'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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5538024
复制相关文章
相似问题
腾讯云开发者
