1

添加新标签时 ui-select2 中的默认设置使当前文本选项显示在下拉列表的顶部。

例如，如果我想输入“English”，这是我的选项列表中存在的一个项目，当我输入“Eng”时，自动建议的文本“English”会出现在下拉列表的第二位，而“Eng”首先出现（即添加一个新标签“Eng”，而不是选择现有选项“English”）。

如果我想输入“Eng”并按 Enter 以获取推荐的选项“English”，这会有点问题，但我希望可以选择创建我自己的标签，该标签不在现有选项列表中。我能想到的最佳解决方案是将当前键入的文本选项（“Eng”）移到底部，并首先显示推荐选项列表（在本例中为“English”）。

有没有办法在 ui-select2 中做到这一点？我尝试如下使用 createSearchChoicePosition 来尝试一下：

createSearchChoice: function(term) { return {id: 3,text:term}; },
createSearchChoicePosition: 'top'

但这并没有影响任何事情（即使我将位置更改为“底部”）。有没有其他方法可以做到这一点，或者我是否错误地使用了 createSearchChoicePosition？

4

2 回答 2

2

在这里您可以找到一个可能的解决方案：

    $('.select2field').select2({
        tags: null,
        createSearchChoice: function (term, data) {
            console.log('createSearchChoice');
            console.log(data);
            return {
                id: -1,
                text: term,
                isNew: true
            };
        },
        createSearchChoicePosition: 'bottom',
        width: '300px',
        query: function (options) {
            console.log('query');
            options.context = options.context || {
            };
            if (options.page === 1 )
            {
                var result = {
                    results: [
                        {id: 0, text: 'English'},
                        {id: 1, text: 'Spanish'},
                        {id: 2, text: 'Chinese'}
                    ],
                    more: true
                };
                options.callback(result);
            }
            else if (options.page === 2)
            {
                var result = {
                    results: [
                        {id: 3, text: 'French'},
                        {id: 4, text: 'German'},
                        {id: 5, text: 'Portugese'}
                    ],
                    more: false
                };
                options.context.page = 2
                options.callback(result);
            }
        }
    })
    .on('select2-loaded', function(items) { 
        console.log('select2-loaded');
        console.log(items);
    })
    .on('select2-selecting', function(e) {
        if (e.object.isNew) {
            alert("Is new!");
        }
    });

这是 jsfiddle 示例：jsfiddle 示例

可以看到，结果是通过“查询”函数返回给select2控件的，它模拟了一个ajax调用。它将新元素放在第一页的底部（在中文和法文之间）。这是 CreateSearchChoicePosition 的正常行为。希望这可以帮助。

于 2014-04-14T09:48:55.937 回答
0

我并不是想通过建议来迂腐（因为我一直在遭受与您描述的相同的问题），但是您是否检查过您引用的 select2 的版本？

就我而言，我无意中引用了 v3.4.5：使用任何比这更新的版本都可以解决我的问题。

这可以使用 soycabanillas 的 JSFiddle 示例通过从 3.4.6 降级他的外部资源来演示。

希望这可以帮助。

于 2014-05-09T08:11:36.613 回答