Поле со списком семантического пользовательского интерфейса

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

Мои требования:
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>

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


combobox semantic-ui
person Geemang    schedule 29.01.2015    source источник
comment
вы нашли решение этого?   -  person Chetan Sachdev    schedule 06.12.2016

Ответы (2)


arrow_upward
2
arrow_downward

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

Вот пример того, что я сделал со своим, чтобы выполнить требование 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;
            }
        });
    }
});
person MTran    schedule 17.04.2015

arrow_upward
0
arrow_downward

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

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

person cuixiping    schedule 28.05.2015