セマンティクuiドロップダウン、入力要素で自動選択を防止

Question

項目が存在しない場合、項目を追加できるようにドロップダウンにオプションを追加しました。

そのため、ドロップダウンに入力フィールドを追加しましたが、ユーザーが何かを入力すると、ドロップダウンでは、入力されたテキストが既にリストにあるアイテムと一致するように試みます。

私はその特定のケースでは非常に迷惑であると感じます。私はdocsの中で、input要素がsearch関数に束縛されていることに気付きました。それにもかかわらず、私はこの動作を無効にする方法を見つけることができませんでした。

は、ここにHTMLです：

<div class="ui fluid selection dropdown playlist"> 
    <input name="playlist" type="hidden"> 
    <i class="dropdown icon"></i> 

    <div class="default text">playlist</div> 

    <div class="menu"> 
     <div class="item create" data-value="0"> 
      <span class="create-placeholder">+ new playlist</span> 

      <div class="ui action input add-playlist"> 
       <input placeholder="new playlist"> 
       <button class="ui button">Add</button> 
      </div> 
     </div> 

     <div class="item" data-value="1">foo</div> 
     <div class="item" data-value="2">bar</div> 
     <div class="item" data-value="3">baz</div> 
    </div> 
</div> 

.add-playlist div要素とその内容が示されていないが、私はここにCSSであなたを惜しまして喜びました。

とJS：

$dropdown = $('.ui.dropdown'); 

$dropdown.dropdown({ 
    action: (text, val) => { 
     if (val == 0) { // eslint-disable-line 
      $('.create-placeholder').hide(100); 
      $('.add-playlist').css('display', 'inline-flex'); 
      $('.add-playlist input, .add-playlist button').show(200); 
     } 

     else $dropdown.dropdown('set selected', val).dropdown('hide'); 
    }, 
    onHide:() => { 
     // do that after dropdown has been hidden 
     setTimeout(() => { 
      $('.add-playlist, .add-playlist input, .add-playlist button').hide(); 
      $('.create-placeholder').show(); 
     }, 400); 
    } 
}); 

私は明確なexempleを持っているfiddleを設定しました。ちょうど「foo」とタイプすれば、それがはっきりしていない場合に備えて私が何を意味するのかがわかります。

Answer 1

はちょうどより多くinformtionsが見るために、オプションをドロップダウンするにはallowAdditions: Trueを追加し、ユーザーが新しいアイテムを追加できるようにするにはsemantic-ui dropdown settings

例：

$（ 'dropdownSelector'）ドロップダウン（{ allowAdditions：真 }）。 。落ちる（）;