语义UI下拉搜索-使用Enter键选择

Question

我一直在为一个项目使用语义UI。 我正在使用下拉菜单的“搜索选择”版本（类为“ ui fluid搜索选择下拉菜单”）。 在每个项目下，我都设置了一个自定义的data-dogs属性，该属性的值为0或1。如果所选项目的data-dogs值为1，则我需要在窗体上显示一个项目，如果它为0，则将其隐藏。

鼠标单击可以正常工作，但是我对JS感到很生疏，因此我不确定是否可以通过Enter键和上/下箭头找到一种简单的方法来获得相同的功能。

我制作的JS代码如下。

如果有人可以给我一些指导，我将非常感谢。

提前谢谢了！

 $('.item').on('click', function(){ if($(this).data('dogs')==1){ $('#dogCheckbox').removeClass('hidden'); console.log('Working?'); } else { $('#dogCheckbox').addClass('hidden'); } } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ui fluid search selection dropdown"> <input type="hidden" name="location" id="location_search"> <i class="dropdown icon"></i> <div class="default text"></div> <div class="menu"> <div class="item" data-value="1" data-dogs="0">A1</div> <div class="item" data-value="2" data-dogs="0">A2</div> <div class="item" data-value="3" data-dogs="0">A3</div> <div class="item" data-value="4" data-dogs="0">A4</div> <div class="item" data-value="5" data-dogs="0">A5</div> <div class="item" data-value="6" data-dogs="0">A6</div> <div class="item" data-value="7" data-dogs="0">A7</div> <div class="item" data-value="8" data-dogs="0">A8</div> <div class="item" data-value="9" data-dogs="1">A9</div> <div class="item" data-value="10" data-dogs="1">A10</div> <div class="item" data-value="11" data-dogs="1">A11</div> <div class="item" data-value="12" data-dogs="0">A12</div> <div class="item" data-value="13" data-dogs="1">A14</div> <div class="item" data-value="14" data-dogs="1">A15</div> <div class="item" data-value="15" data-dogs="1">A16</div> </div> </div> <div class="ui checkbox hidden" id="dogCheckbox"> <input type="checkbox" tabindex="0" class="hidden" name=" form_dog"> <label>Dog friendly unit! Is a dog present?</label> </div> 

Answer 1

您可以尝试以下方法：

$(".item").keyup(function(event){
    if(event.keyCode == 13){
        $('.item').click();
    }
});

13是Enter键代码，因此-在发生keyup事件时，按下的键是Enter-执行单击功能。

希望能帮助到你