Chosen: html5 需要的属性支持？

@Aharito我们不会通过执行此操作来解决 Tab 键顺序问题吗？

谢谢@Aharito，它在选定的 v1.1.0 上运行良好，只需将$('select.chzn')替换$('.chosen-select') 。

我以为我尝试了那个剪辑：矩形技巧，并发现了一些问题。 也许使用较旧的浏览器？ 我想如果它现在工作很好。

我认为我的解决方案也可能存在制表符问题（我不记得了，已经有一段时间了） - 我通过仅将补丁应用于构成所需属性的字段来减少影响。

我们已经在对$().chosen()所有调用中对此进行了标准化

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !options || _.isObject(options)

  if (is_creating_chosen && select.css('position') === 'absolute') {
    // if we are creating a chosen and the select already has the appropriate styles added
    // we remove those (so that the select hasn't got a crazy width), then create the chosen
    // then we re-add them later
    select.removeAttr('style')
  }

  var ret = select.oldChosen(options)

  if (is_creating_chosen) {
    // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
    // only do this if we are initializing chosen (no params, or object params) not calling a method
    select.attr('style','display:visible; position:absolute; clip:rect(0,0,0,0)');
  }
  return ret
}

@ghiculescu这并不能解决在选择中使用 tab 或 shift-tab 的问题，是吗？

@DASPRiD不。

这作为可能的掩盖解决方案怎么样。

它并不完美，但实际上，它通过将焦点传递到下一个选择的对话框来阻止原始选择的出现，但也许它又近了一步

“选择选择”只是我对特定类的选择的选择器，我不确定“单击焦点”是否涵盖了我应该挂钩的所有相应事件，但也许有人可以说还缺少什么？

也有可能我对所选的 html 结构有一些误解， find("a") 太自由了，有人有更多经验吗？

$(".chosen-select").on("click focus",function(event){
    $(this).next(".chosen-container").find("a").trigger(event.type);
});

哦，当然“ display:visible ”应该是“ display:block ”之类的？ 原因 v isibility:visible是有效的，但display:visible我确定不是

我发现，如果您在同一个容器中有多个彼此相邻的选择，这会将它们全部移到错误的位置，因此 position: absolute 使验证消息出现在错误的位置。

我通过分离并重新连接到选定的容器来解决这个问题，就像这样

$(".chosen-select").each(function(){
    $(this).next(".chosen-container").prepend($(this).detach());
});

上面的解决方案，经过更多的调查，表明它完全禁用了对字段的跳转，我无法解决这个问题，但是它确实消除了当你跳转时弹出选择的问题，所以这是更多在我看来很重要的问题，如果可以的话，我可以不使用 Tab 键而生活，这样它就不会破坏显示，因为越来越多的人正在使用移动设备并且无论如何都不会使用 Tab 键，它只会影响桌面用户，这仍然很重要，但是相对来说，可控。

但是，如果有人通过某种方式解决了这个问题，我很想知道。

好的，除了我之前尝试的内容之外，我发现所选择的事件正在使用，并决定当我对现在隐藏的选择执行任何事件时，我可以劫持它并触发所选事件以将其打开。

我认为它很好用。

$(".chosen-select").each(function(){
    //    take each select and put it as a child of the chosen container
    //    this mean it'll position any validation messages correctly
    $(this).next(".chosen-container").prepend($(this).detach());

    //    apply all the styles, personally, I've added this to my stylesheet
    $(this).attr("style","display:block!important; position:absolute; clip:rect(0,0,0,0)");

    //    to all of these events, trigger the chosen to open and receive focus
    $(this).on("click focus keyup",function(event){
        $(this).closest(".chosen-container").trigger("mousedown.chosen");
    });
});

我认为这是迄今为止我得到的最好的版本。 令人高兴的是，这解决了向前跳转问题，仍然存在反向跳转，您无法通过选择的选择向后跳转，因为第二次跳转到选择元素时，您会立即重新聚焦到选择的容器中，这意味着您重新陷入只能向前跳。

跟踪上一个元素可能是一个想法，如果之前具有选项卡焦点的元素位于当前焦点元素的前面，则您将向后退，然后适当地跳过重新聚焦到所选元素并选择上一个选项卡，但是我不确定该怎么做。

经过很长时间的阅读，我想我尝试了多年来提交的建议。

不幸的是，我无法让@christomas的代码起作用。 我在没有可见结果的提交函数中调用它（也没有错误）。

好消息是@ghiculescu的新功能就像一种享受，因为我仍然可以使用 CDN 选择的文件，只需在我的 js 文件中使用该功能。

@DASPRiD @charettes你是什​​么意思选项卡不适用于修改后的功能？ 它似乎对我有用

很容易将 tabindex: -1 添加到@ghiculescu的片段的选择中，解决制表问题。

示例： http :

我现在可以看到问题了！ 您的添加效果很好@andreialecu

顺便说一下，还需要另外添加一个。 在 iPhone 或其他不受支持的设备上，小提琴将无法正常工作。 Chosen 在 iPhone 上禁用自身并保持<select>不变，上面小提琴中的代码将隐藏它，无法与选择交互。

这个小提琴修复了它（通过添加一个显示：无检查）：
http://jsfiddle.net/hq7b426j/1/

啊，那就更好了！！ 谢谢！ 我也在测试，但如果有其他问题我会发布

@CaptainN请简要说明我有同样的问题。 我需要把那个代码。 我正在使用 wrapbootstrap 的 inspina 主题。

@vidhyaprakash85我不确定你的意思。 我很久以前就分叉了，并写了一个拉取请求（#900），但现在 repos 不同步，而且我的分叉已经过时了。 如果有帮助，您可以在这里找到它： https :

我已经在使用https://github.com/harvesthq/chosen如何做到这一点:(

@andreialecu你的代码工作正常！ 谢谢！！！

谢谢@christhomas，你的代码效果很好：舞者：

@christomas或@ghiculescu都没有使用多组选择为我工作。 暂时将其留给服务器验证。

当我尝试使用@ghiculescu补丁时，它工作正常，只是在选择框下方始终显示滚动条。
当我尝试@christomas补丁时，弹出窗口没有打开搜索框。

我不得不修改@ghiculescu的脚本，这样我就可以像这样调用

target.find('select')
        .chosen('destroy')
        .chosen({disable_search_threshold: 10})

否则，第二次旅行删除了第一次添加的样式：

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !!options

    var style = 'display:visible; position:absolute; clip:rect(0,0,0,0);'

        if (is_creating_chosen && select.css('position') === 'absolute' && select.attr('style') != style) {
            // if we are creating a chosen and the select already has the appropriate styles added
            // we remove those (so that the select hasn't got a crazy width), then create the chosen
            // then we re-add them later
            select.removeAttr('style')
        }

        var ret = select.oldChosen(options)

        // only act if the select has display: none, otherwise chosen is unsupported (iPhone, etc)
        if (is_creating_chosen && select.css('display') === 'none') {
            // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
            // only do this if we are initializing chosen (no params, or object params) not calling a method
            select.attr('style', style);
            select.attr('tabindex', -1);
        }
        return ret
}

我只是在第一个条件中添加了这个额外的条件： && select.attr('style') != style

@doganmeh在 Chrome 和移动设备（使用 Chrome）中运行良好，但在 Firefox 53.0 中无法运行时进行了测试

即使这个http://jsfiddle.net/hq7b426j/1/在 Firefox 53.0 中也不起作用

嗯，但这似乎更像是 Firefox 的问题，因为如果您多次单击该按钮，您将看到 Firefox 尝试显示消息（但从未完全呈现）

我用过这个解决方案。 它非常简单并且完美运行：

<style>
    select.submitted:invalid + .chosen-container{
        border-color: red !important;
    }
</style>

$('#yourSelector').chosen({
                no_results_text: "yourText",
                disable_search_threshold: 9,
                search_contains: true
                //your parameters
    }).on('invalid', function(){
        $(this).addClass('submitted');
    });

如果您选择了多项选择，这似乎不起作用：
http://jsfiddle.net/jeromax/o5a8aogh/

我修好了它。

`
$.fn.oldChosen = $.fn.chosen
$.fn.chosen = 功能（选项）{
var select = $(this),
is_creating_chosen = !!options;

if (is_creating_chosen && select.css('position') === 'absolute') {
// 如果我们正在创建一个选择并且选择已经添加了适当的样式
// 我们删除那些（以便选择没有疯狂的宽度），然后创建选择的
// 然后我们稍后重新添加它们
select.removeAttr('style');
}

var ret = select.oldChosen(options)

// 仅当 select 具有 display:none 时才起作用，否则不支持 selected（iPhone 等）
if (is_creating_chosen && select.css('display') === 'none') {
// https://github.com/harvesthq/chosen/issues/515#issuecomment -33214050
// 仅当我们初始化 selected（无参数或对象参数）而不调用方法时才执行此操作

  $(this).each(function(index){
      if($(this)[0].multiple==true){
          $(this).attr('style','display:visible; width:0px; height:0px; margin-top:25px; position:absolute; clip:rect(0,0,0,0)');
      }else{
          $(this).attr("style","display:visible; position:absolute; clip:rect(0,0,0,0)");
      }
  })

select.attr('tabindex', -2);

}
返回 ret
}
`

+1

有人可以为此提交修复程序吗？ 这是一个很老的问题，现在非常重要的功能。 谢谢你。

不适用于最新版本。

当使用 angular-chosen 时，这似乎也破坏了 angular.js 表单验证。

现在是 2018 年，我们仍然遇到同样的问题。 HTML 标准无法正常工作并与外部插件集成真是太糟糕了。 疯狂的时代:)

这也破坏了 Drupal 选择的插件。 见https://www.drupal.org/project/chosen/issues/2705891

除了解决方法之外，找不到任何适当的解决方案：

<div class="form__select">
  <select class="chosen">
    <!-- options -->
  </select>
</div>

.form__select {
    position: relative;
}

.form__select .chosen {
    display: block !important;
    height: 0;

    position: absolute;
    left: 35px;
    bottom: 0;

    outline: none;
    border-color: white;

    pointer-events: none;
}

如果您对所有select元素使用 Chosen，您可以使用此 CSS 更改使其可见（对 DOM），但没有不透明度、没有高度、绝对位置。

这些 CSS 选择器针对无效的 select 元素，其中一个针对multiple添加一个15px margin-top以使其在多选元素上居中。

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
   margin-top: 15px !important;
}

演示： http :

但真的……这应该已经由 Chosen.JS 库处理了

这是我的解决方法，如果它有任何用处：

// Initialise Chosen
$(function () {
    $('select').chosen();
});

// Place the original input behind the Chosen input, matching the height and width so that the warning appears in the correct position
$('select').on('chosen:ready', function () {
    const height = $(this).next('.chosen-container').height();
    const width = $(this).next('.chosen-container').width();

    $(this).css({
            'position': 'absolute',
            'height': height,
            'width': width,
            'opacity': 0
        })
        .show();
});

@jonathanbull你能在上下文中展示它吗？ 我尝试了您的解决方案，但没有奏效。

@AndrewSouthpaw这是我的代码，

$("#select").val([]); // disable default selection by browser
$('#select').on('chosen:ready', function(evt, params, chosen) {
    $(this).css({'position': 'absolute', 'height': 0, 'opacity': 0}).show();
});
$("#select").chosen();

我使用了稍微不同的代码（基于此处的代码）：

$('.chosen-select').on("chosen:ready", function (evt, data) {
  $(this)
    .addClass('chosen_hidden')
    .attr('tabindex', '-1')
    .prependTo(data.chosen.container)
    .show()
  })
  .chosen({width: '100%'})

.chosen_hidden {
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: 100%; // required for IE 10
  // **not required** opacity: 0;
}

它不处理“销毁”操作，但它确实很好地定位了错误消息，并且似乎适用于 Firefox 和 Chromiun。 由于原始选择器未隐藏，因此错误高亮边框可见。 更新：使用max-height它也适用于 IE。 其他更新：添加 tabindex -1 以确保它不会获得焦点。 （同时仍可聚焦并接收错误消息）。

有一个公开的 PR 解决了这个问题，但我认为它丢失了，因为它针对的另一个线程已关闭。 见#2594

@jhedstrom很乐意看到合并。 不知道这个库还在维护吗？

我使用了类似于上面@eloyesp的解决方案的东西，并在这里分享：

https://github.com/harvesthq/chosen/pull/2594#issuecomment -714806139

感谢@jhedstrom为我指明了正确的方向！