решение для компонента ui, которое объединяет ввод и выпадение текста

Question

Есть ли готовое к использованию семантическое ui решение для компонента ui, которое объединяет ввод текста и выпадающее из предопределенных значений. Образец: «Выпадающее меню может отображаться как плавающее под элементом» (http://semantic-ui.com/modules/dropdown.html), но вместо ввода кнопки будет вводиться текст.

Answer 1

ContentEditable Решение:

Попробуйте использовать новый html5 элемент, "contenteditable".

например. Оригинальный стандарт Семантический код UI:

<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> 

Новый Модифицированный код с 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> 

Уведомление третьей линии изменяется несколькими способами. Я удалил класс по умолчанию, так как мне не нужен эффект серого заполнителя. Я добавил атрибут contenteditable. И я также удалил текст заполнителя.

Теперь вам нужен обработчик событий JQuery, который обрабатывает событие onChange для div или событие нажатия кнопки формы формы, чтобы вы могли скопировать значение div на скрытый ввод текста.

DataList HTML5 Решение:

Если строго не нужен выпадающий стиль семантический UI обеспечивает, например, опция делителей, то вы можете использовать:

<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>