使用jQuery将焦点发送给动态li [英] Send focus to dynamic li with jQuery
问题描述
我想知道您是否可以将焦点发送给动态锂.这是我想要做的:
我有一个搜索框，该搜索框绑定了一个keyup函数，可以在其中搜索人员的姓名.结果显示在搜索框正下方的div中，其中包含ul个结果.我希望将其放置在某个位置，如果有人按下向下箭头按钮，则焦点将切换到ul的第一个元素.有点像下拉菜单的工作方式.这是代码(我并没有放入所有CSS，因此看起来不像它看起来那么漂亮-仅供参考)
$(document).ready(function(){
$('#search_name').keyup(function(e) {
if(e.which == 40){
//It does get here, and does find the li, BUT doesn't send the focus
$('#search_results').find('li:first').focus();
return ;
}
//This is the function that displays the UL in #search_results
/*delay_call(function(){
searchNameDept();
}, 500 ); */
});
});
#search{
position: relative;
right:0;
margin:0 1em;
width:350px;
}
#search{
top:0;
z-index:10;
}
#search_name{
display:block;
padding:10px 50px 10px 10px;
border:0;
margin:0;
}
#search > a{
position: absolute;
right:0;
top:0;
bottom:0;
padding:0 10px;
background-color: #ec9507;
}
#search > a i{
color:#fff;
}
#search_results{
position: absolute;
top:100%;
left: 0;
right:0;
max-height: 200px;
overflow: auto;
}
#search_results ul{
width: 100%;
margin:0;
padding:0;
}
#search_results li{
width: 100%;
list-style-type: none;
box-sizing: border-box;
margin:0;
padding:10px 15px;
background-color: #fff;
border-top:1px solid #ccc;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
cursor:pointer;
word-wrap:break-word;
}
#search_results li:hover, #search_results li:focus{
color:#fff;
background-color: #27c7f4;
}
#search_results li i{
padding-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form action="#" method="post" class="boxy" id="search">
<input type="text" name="search_name" id="search_name" class="boxy" value="DIRECTORY" autocomplete="off" />
<a href="javascript:void(0)" class="center_flex">Search</a>
<div id="search_results">
<!-- Example content that is printed out after searchNameDept() is run -->
<ul>
<li class="search_org">Sally Joe</li>
</ul>
</div>
</form>
我尝试了$('#search_results').find('li:first').focus()，$('#search_results').find('li:first').trigger('focus') .什么都行不通.有人有反馈吗?
您只需要使用CSS&一些jQuery在这里. 这是你的小提琴. https://jsfiddle.net/7h0pavzb/需要添加一个类以显示已被选中. >
您的jquery
$(document).ready(function(){
$('#search_name').keyup(function(e) {
if(e.which == 40){
if($("#search_results li.active").length!=0) {
var storeTarget = $('#search_results').find("li.active").next();
$("#search_results li.active").removeClass("active");
storeTarget.focus().addClass("active");
}
else {
$('#search_results').find("li:first").focus().addClass("active");
}
return ;
}
});
});
以及我添加的样式，
#search_results li.active { background:#000; color:#fff; }
这是另一个用于向上和向下箭头键的小提琴. https://jsfiddle.net/7h0pavzb/1/
I was wondering if you can send focus to a dynamic li. Here's what I'm trying to do:
I've got a search box that has a keyup function bound to it where it searches for people's names. The results appear in a div right below the search box with a ul of results. I was hoping to make it where if someone hits the down arrow button that the focus gets switched to the first element of the ul. Kind of like how a drop down works. Here's the code (I didn't put in all the CSS so it doesn't look as pretty as it should--just FYI)
$(document).ready(function(){
$('#search_name').keyup(function(e) {
if(e.which == 40){
//It does get here, and does find the li, BUT doesn't send the focus
$('#search_results').find('li:first').focus();
return ;
}
//This is the function that displays the UL in #search_results
/*delay_call(function(){
searchNameDept();
}, 500 ); */
});
});
#search{
position: relative;
right:0;
margin:0 1em;
width:350px;
}
#search{
top:0;
z-index:10;
}
#search_name{
display:block;
padding:10px 50px 10px 10px;
border:0;
margin:0;
}
#search > a{
position: absolute;
right:0;
top:0;
bottom:0;
padding:0 10px;
background-color: #ec9507;
}
#search > a i{
color:#fff;
}
#search_results{
position: absolute;
top:100%;
left: 0;
right:0;
max-height: 200px;
overflow: auto;
}
#search_results ul{
width: 100%;
margin:0;
padding:0;
}
#search_results li{
width: 100%;
list-style-type: none;
box-sizing: border-box;
margin:0;
padding:10px 15px;
background-color: #fff;
border-top:1px solid #ccc;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
cursor:pointer;
word-wrap:break-word;
}
#search_results li:hover, #search_results li:focus{
color:#fff;
background-color: #27c7f4;
}
#search_results li i{
padding-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form action="#" method="post" class="boxy" id="search">
<input type="text" name="search_name" id="search_name" class="boxy" value="DIRECTORY" autocomplete="off" />
<a href="javascript:void(0)" class="center_flex">Search</a>
<div id="search_results">
<!-- Example content that is printed out after searchNameDept() is run -->
<ul>
<li class="search_org">Sally Joe</li>
</ul>
</div>
</form>
I have tried $('#search_results').find('li:first').focus(), $('#search_results').find('li:first').trigger('focus'). Nothing works. Anyone have any feedback?
you need to just play with CSS & some jquery here. here is your fiddle. https://jsfiddle.net/7h0pavzb/ need to add a class to show that it is selected.
your jquery
$(document).ready(function(){
$('#search_name').keyup(function(e) {
if(e.which == 40){
if($("#search_results li.active").length!=0) {
var storeTarget = $('#search_results').find("li.active").next();
$("#search_results li.active").removeClass("active");
storeTarget.focus().addClass("active");
}
else {
$('#search_results').find("li:first").focus().addClass("active");
}
return ;
}
});
});
and the style what i append is,
#search_results li.active { background:#000; color:#fff; }
here is another fiddle for up and down arrow key. https://jsfiddle.net/7h0pavzb/1/
这篇关于使用jQuery将焦点发送给动态li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
