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

Question

Is there a semantic-ui ready-to-use solution for ui component that combine text input and dropdown of predefined values. The sample is "A dropdown menu can appear to be floating below an element" (http://semantic-ui.com/modules/dropdown.html), but it would be text input instead of button.

Answer 1

ContentEditable Solution:
Try using the 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 with 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 is modified in several ways.
I removed the "default" class since I don't want the grey placeholder effect.
I added contenteditable attribute.
And I also removed the placeholder text.
Now you need a JQuery event handler that handles that div's onChange event, or the form's submit's button click event so that you can copy the div's value to the hidden text input.
Datalist HTML5 Solution:
If you strictly don't need the dropdown styling semantic UI provides, such as option dividers, then you 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>