Question

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

例如，如果我想输入＆＃34;英语，＆＃34;我输入选项列表中的项目，因为我键入＆＃34; Eng，＆＃34;自动建议的文字＆＃34;英文＆＃34;在下拉列表中排名第二，而＆＃34; Eng＆＃34;首先显示（即添加新标签＆＃34; Eng＆＃34;而不是选择现有选项＆＃34;英语＆＃34;）。

如果我想键入＆＃34; Eng＆＃34;这有点问题。并按Enter键以获得推荐选项＆＃34;英语，＆＃34;但我想选择创建不属于现有选项列表的自己的标签。我能想到的最佳解决方案是将当前输入的文本选项（＆＃34; Eng＆＃34;）移到底部，并列出推荐选项列表（在本例中为＆＃34; English＆＃34;）首先出现。

有没有办法在ui-select2中执行此操作？我尝试使用createSearchChoicePosition，如下所示：

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

但它并没有影响任何事情（即使我将位置改为＆＃39;底部＆＃39;）。有没有其他方法可以做到这一点，还是我错误地使用createSearchChoicePosition？

Answer 1

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

    $('.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 example

如您所见，结果通过“query”函数返回到select2控件，并模拟ajax调用。它将新元素放在第一页的底部（中文和法文之间）。这是CreateSearchChoicePosition的正常行为。希望这会有所帮助。

Answer 2

我并不是想通过暗示这一点来迂腐（因为我已经遭受了你所描述的同一个问题），但是你检查了你引用的select2的版本吗？

在我的情况下，我无意中提到了v3.4.5：使用比这更新的版本解决了我的问题。

这可以用soycabanillas＆＃39;来证明。 JSFiddle的例子是将他的外部资源从3.4.6降级。

希望这有帮助。

ui-select2 - 在列表底部显示添加新标签

2 个答案: