语义 UI 组合框

我正在为我的项目使用语义UI框架。我需要组合框功能，所以我尝试将文本输入和语义 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>

当我在输入中键入值时，我需要进行下拉搜索。

不久

前我遇到了几乎相同的问题。

这是一个关于我为满足要求 1）和 3）所做的工作的示例）。http://plnkr.co/edit/4nC44UETWhPb8yVNNtKz?p=preview

代码也粘贴在下面，但没有大量的注释块。基本上它的工作原理是它使用语义的 UI 内置搜索选择下拉框类，即"搜索选择"，并使用模糊来设置您提交的隐藏文本字段。

您需要使用代码设置隐藏文本字段的原因是语义 UI 生成第二个文本字段，其中类"搜索"用户会看到并键入数据，但实际上并未提交。

还有其他额外的代码来处理其他问题，请参阅上面 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;
            }
        });
    }
});

不幸的是，Semantic-UI 在最新版本 1.12.x 之前没有此功能。

"ui search selection dropdown"的行为与真正的组合框行为非常不同。

相关内容

最新更新

热门标签：