4

我在select2上使用了格式化程序，所以我可以很好地对齐两个元素（代码/描述），但插件似乎只是在搜索描述，而不是将代码/描述视为整个文本。

可能是因为它只搜索原始内容中的<option/>内容，而不是稍后附加的内容。

HTML

<select class="foo">
    <option value="codex">description 1</option>
    <option value="codey">description 2</option>
    <option value="cod">description 3</option>
    <option value="code">description 4</option>
</select>​

JS

function selectBoxOptionFormat(state) {
    var originalOption = state.element;

    return "<span class='selectBoxOptionCode'>" + state.id + "</span><span>" + state.text + "</span>";    
}

$(".foo").select2({
    width:"350px",
    formatResult: selectBoxOptionFormat
}); ​

在这里摆弄

任何人都知道解决这个问题的方法吗？

4

3 回答 3

2

您可以添加此代码 - 或手动将值添加到 html 中的文本

$('.foo option').text(function(i,v){
    return this.value + ' ' + v;
});

然后在您的格式功能中，删除该值

function selectBoxOptionFormat(state) {
    var originalOption = state.element;
    var txt = state.text.split(' ').slice(1).join(' ');
    return "<span class='selectBoxOptionCode'>" + state.id + "</span><span>" + txt  + "</span>";    
}

http://jsfiddle.net/wirey00/2ZLWU/

编辑：

您可以使用 matcher 选项并将值添加到文本

$(".foo").select2({
    width:"350px",
    formatResult: selectBoxOptionFormat,
    matcher: function(term, text,v) { 
        var txt = $(v).val() + ' ' + text;       
        return txt.toUpperCase().indexOf(term.toUpperCase())==0; }
}); ​

http://jsfiddle.net/wirey00/HudyG/

于 2012-12-27T20:57:48.937 回答
1

在不编辑 select2 插件的情况下，您可以做一些简单的事情，比如......

将值附加到标记中的描述（或使用 jQuery）。

<option value="codex">description 1 [codex]</option>

然后让你的“selectBoxOptionFormat”把它去掉

state.text.replace(/\[[^\]]+\]/, "");
于 2012-12-27T20:56:47.720 回答
1

似乎可以在 Select2 中创建自定义匹配项。我错过了他们文档页面上提到基于自定义选项属性进行搜索的可能性的部分。对不起。

matcher: function(term, text, opt) {
                    return text.toUpperCase().indexOf(term.toUpperCase())>=0
                        || opt.attr("value").toUpperCase().indexOf(term.toUpperCase())>=0;
}
于 2012-12-27T21:15:42.833 回答