jQuery Chosen插件：自定义/格式化选择框中选项的文本

Question

我正在使用一个名为chosen的jquery插件，它带有自动完成功能的下拉选择框。您可以在以下链接中找到更多信息：http://harvesthq.github.com/chosen/ 我想知道如何格式化下拉选择框中选项的文本？是否有chosen插件的方法可以实现这一点？我已经阅读了文档并扫描了代码，但似乎找不到相关内容。

这是我想要实现的效果截图（这是使用另一个插件“selectmenu”制作的，但我想使用“chosen”完成相同的效果）。

- cancelledout

Answer 1

当前主分支中没有这样的功能。

但是有这个拉取请求，它正是您需要的（目前仅适用于jquery）： https://github.com/harvesthq/chosen/pull/692

所以您可以从这里获取代码。 https://github.com/cjstewart88/chosen/tree/templates

- Igor Lizunov

Answer 2

现在还有另外一种方法可以实现...

您可以添加特殊字符，这些字符在普通选择框中看起来仍然正常，但通常不会显示在文本中。例如 TITLE :: Description。然后找到 :: 并使用它进行格式化。此示例设计用于单个选择。对于多个选择，您可能只需更改 .chosen-single，或使用其他选择方法。

$('select[name="SELECT_NAME"]')
    .chosen({search_contains: true})
    .add('.chosen-search')
    .on('chosen:showing_dropdown keyup change', function() {
    $('.chosen-results .active-result, .chosen-single span').html(function() {
        var html = $(this).html();
        if (/ :: /.test(html)) {
            return '<strong>' + html.replace(' :: ', '</strong> <span style="font-size:70%;display:inline;font-weight: normal;">') + '</span>';
        } else {
            return html;
        }
    });
});

在这个例子中，您的结果应该是<strong>标题</strong> <span style="font-size:70%;display:inline;font-weight: normal;">描述</span>。

- groovenectar

Answer 3

您可以将宽度作为参数添加到选择的选项中。

$("field").chosen({ width: '400px' })

- Moustafa Samir