セマンティックUIドロップダウン検索 - エンターキーで選択

Question

私はプロジェクトのためにセマンティックUIを使っています。私はドロップダウンの検索選択バージョンを使用しています（クラスは '流体検索選択ドロップダウン'です）。各アイテムの下に、0または1のカスタムデータ - 犬の属性が設定されています。選択したアイテムのデータ犬の値が1の場合は、表示するアイテムが必要です。

マウスのクリックでうまくいきましたが、私はJSで少し錆びていますので、Enterキーと上/下矢印で同じ機能を簡単に利用できる方法があるかどうかはわかりません。

私が作ったJSコードは以下の通りです。

誰かが私にいくつかの指摘を与えることができたら、私はそれを非常に感謝します。

事前に感謝します。

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

13は、キーコードを入力している、SO-からkeyupイベントが発生し、押されたキーがあるときEnter-は、クリック機能を実行します。

$('.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>

Answer 1

あなたはこれを試すことができます。

希望します。