semantic ui - solution for ui component that combine text input and dropdown -

semantic ui - solution for ui component that combine text input and dropdown -

is there semantic-ui ready-to-use solution ui component combine text input , dropdown of predefined values. sample "a dropdown menu can appear floating below element" (http://semantic-ui.com/modules/dropdown.html), text input instead of button.

contenteditable solution:

try using new html5 element, "contenteditable".

e.g. original standard semantic ui code:

<div class="ui selection dropdown"> <input type="hidden" name="gender"> <div class="default text">gender</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item" data-value="male">male</div> <div class="item" data-value="female">female</div> </div> </div>

new modified code contenteditable:

<div class="ui selection dropdown"> <input type="hidden" name="gender"> <div class="text" contenteditable="true"></div> <i class="dropdown icon"></i> <div class="menu"> <div class="item" data-value="male">male</div> <div class="item" data-value="female">female</div> </div> </div>

notice 3rd line modified in several ways. removed "default" class since don't want gray placeholder effect. added contenteditable attribute. , removed placeholder text.

now need jquery event handler handles div's onchange event, or form's submit's button click event can re-create div's value hidden text input.

datalist html5 solution:

if strictly don't need dropdown styling semantic ui provides, such alternative dividers, can use:

<div class="ui input"> <input list="browsers" type="text"> <datalist id="browsers"> <option value="internet explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="safari"> </datalist> </div>

semantic-ui