Semantic ui combobox

Я использую семантику для моего проекта. Мне нужна функция combobox, поэтому я пытаюсь объединить ввод текста и всплывающее меню семантики.Semantic ui combobox

Мои требования:
1) Примите значения, которые не в раскрывающемся списке
2) Выполните проверку в отношении ввода текста (например, без пробелов)
3) Выберите/Поиск против выпадающего списка

См: http://plnkr.co/edit/d5IUrqfHyjLy0qcH4qYQ?p=preview

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.8.1/semantic.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.8.1/semantic.min.js"></script> 
<script src="script.js"></script> 
</head> 
<body> 
<h4 class="ui inverted black block header"><span>semantic ui</span></h4> 
<div class="ui grid"> 
<div class="eight wide centered column"> 
    <form class="ui form ui form segment"> 
    <h4 class="ui dividing header">Personal Information</h4> 

    <div class="field"> 
     <div class="ui icon input search dropdown"> 
     <input type="text" id="jheader" data-validate="header" placeholder="Enter header" ng-model="person.gender"> 
     <i class="dropdown icon link"></i> 
     <div class="menu"> 
      <div class="item">Clothing</div> 
      <div class="item">Home Goods</div> 
      <div class="item">Bedroom</div> 
      <div class="item">Status</div> 
      <div class="item">Cancellations</div> 
     </div> 
     </div> 
    </div> 
    </form> 
</div> 
</div> 
<script> 
$(document).ready(function() { 
    $('.ui.dropdown').dropdown({ 
    onChange: function(value, text, $selectedItem) { 
     $("#jheader").val(text).trigger('input'); 
    } 
    }); 
    console.log("ready!"); 
}); 
</script> 
</body> 
</html>

Мне нужно задействовать раскрывающийся поиск, когда я вводим значения на входе.

источник

2015-01-29 Geemang

Вы нашли решение этого? –

У меня была почти такая же проблема некоторое время назад.

Вот пример того, что я сделал с моим, чтобы выполнить требование 1) и 3). http://plnkr.co/edit/4nC44UETWhPb8yVNNtKz?p=preview

Код также вставляется ниже, но без массивного блока комментариев. В основном, как это работает, он использует класс раскрывающегося списка семантического выбора семантического интерфейса, т. Е. «Выбор поиска», и использует размытие для установки скрытого текстового поля, которое вы отправляете.

Причина, по которой вам нужно установить скрытое текстовое поле с помощью кода, - это семантический пользовательский интерфейс, создающий второе текстовое поле с классом «поиск», который пользователи будут видеть и вводят данные, но на самом деле не представлены.

Существует также другой дополнительный код для решения других проблем, см. Комментарии в ссылке plunker выше. Чтобы справиться с одним из них, мне пришлось удалить автоматически сгенерированный «активный» класс из раскрывающихся опций div, что привело к эффекту без смещения для выбранного элемента выпадающего списка.

не HTML

<div class="customDropdownSearchTextInput ui search 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>

JavaScript

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

$(".customDropdownSearchTextInput").each(function(){ 

    var defaultText = false; 

    if ($(this).find(".text").hasClass("default") && $(this).find(".text").text()) 
     defaultText = $(this).find(".text").text(); 

    var isSelectTag = false; 
    if ($(this).find("input:hidden").length < 1 || $(this).addBack().find("select").length > 0) 
     isSelectTag = true; 

    if (isSelectTag == false) 
    { 
    $(this).dropdown(
     { 
      forceSelection: false 
     }); 

     $(this).find(".search").on("focus", function(event){ 
      var aOpt = $(this).parent().find(".active"); 
      aOpt.removeClass("active"); 
     }); 

     var originalText = $(this).find(".search").text(); 
     $(this).find(".search").on("blur", function(event){ 
      var text = $(this).val(); 
      if (originalText != text) 
      { 
       if ($.trim(text)=="" && defaultText != false) 
       { 
        $(this).parent().find(".text").addClass("default").removeClass("filtered").text(defaultText); 
       } 
       $(this).parent().find("input:hidden").val(text); 
       originalText = text; 
      } 
     }); 
    } 
});

источник

2015-04-17 08:59:57 Oniisaki

К сожалению, Semantic-интерфейс не имеет эту функцию до последней версии 1.12.x.

Поведение "ui search selection dropdown" сильно отличается от поведенческого поведения.

источник

2015-05-28 14:10:24 cuixiping

Semantic ui combobox

ответ

Смежные вопросы