语义UI下拉搜索 - 使用输入键进行选择

我一直在使用语义UI进行项目。我正在使用下拉菜单的搜索选择版本（类是'ui流体搜索选择下拉菜单'）。在每个项目下，我设置了一个自定义数据狗属性，其值为0或1.如果所选项目的数据块值为1，则需要我的表单上显示一个项目，或者如果它为0，则隐藏。语义UI下拉搜索 - 使用输入键进行选择

它在鼠标点击上工作正常，但我对JS很生疏，所以我不确定是否有一种简单的方法可以通过输入键和向上/向下箭头获得相同的功能。

我所做的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"> 
 
\t <input type="hidden" name="location" id="location_search"> 
 
\t <i class="dropdown icon"></i> 
 
\t <div class="default text"></div> 
 
\t <div class="menu"> 
 
\t \t <div class="item" data-value="1" data-dogs="0">A1</div> 
 
\t \t <div class="item" data-value="2" data-dogs="0">A2</div> 
 
\t \t <div class="item" data-value="3" data-dogs="0">A3</div> 
 
\t \t <div class="item" data-value="4" data-dogs="0">A4</div> 
 
\t \t <div class="item" data-value="5" data-dogs="0">A5</div> 
 
\t \t <div class="item" data-value="6" data-dogs="0">A6</div> 
 
\t \t <div class="item" data-value="7" data-dogs="0">A7</div> 
 
\t \t <div class="item" data-value="8" data-dogs="0">A8</div> 
 
\t \t <div class="item" data-value="9" data-dogs="1">A9</div> 
 
\t \t <div class="item" data-value="10" data-dogs="1">A10</div> 
 
\t \t <div class="item" data-value="11" data-dogs="1">A11</div> 
 
\t \t <div class="item" data-value="12" data-dogs="0">A12</div> 
 
\t \t <div class="item" data-value="13" data-dogs="1">A14</div> 
 
\t \t <div class="item" data-value="14" data-dogs="1">A15</div> 
 
\t \t <div class="item" data-value="15" data-dogs="1">A16</div> 
 
\t </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>

来源

2017-02-23 Allan Wagner

你可以试试这个：

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

13是回车键码，所谓当keyup事件发生，并且按下的键是进入─做点击功能。

希望它可以帮助

来源

2017-02-23 16:43:45 Shtut

嗨Shtut，感谢您的:)我已经尝试过，但好像没有什么改变。我想知道是否因为我专注于标签，而不是'.item'，但我尝试用您的示例中的输入替换第一个“.item”，但它仍然没有它。 –

@Allan Wagner我意识到，使用'select'输入和'onchange'事件可以轻松完成。这与你的原始代码有很大的不同，但你可以看看这里，看看它是否有帮助 - https://jsfiddle.net/16nvz0nk/ – Shtut

不幸的是，他们已经特别要求这种元素（内置搜索栏下拉），因为系统上有数百个项目需要通过。 –

语义UI下拉搜索 - 使用输入键进行选择

回答

相关问题