Combobox 语义用户界面组合框

我正在为我的项目使用语义ui框架。我需要combobox功能，所以我尝试将文本输入和语义ui下拉列表结合起来

我的要求是： 1接受不在下拉列表中的值 2对文本输入执行验证，例如，无空格 3根据下拉列表选择/搜索

见：

---

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

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

这里有一个例子，说明我用我的产品做了什么来满足需求1和3。

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

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

还有其他处理其他问题的额外代码，请参阅上面plunker链接中的注释。为了处理其中的一个问题，我必须从下拉div选项中删除自动生成的活动类，从而使所选下拉项产生非粗体效果

HTML

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;
            }
        });
    }
});

---

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

---

ui搜索选择下拉菜单的行为与真正的combox行为非常不同。

您找到解决方案了吗？

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

$('.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;
            }
        });
    }
});