Select2与createSearchChoice配合使用新创建的键盘输入选项，即使存在匹配，错误或我遗漏了某些东西? [英] Select2 with createSearchChoice uses newly created choice for keyboard entry even given a match, bug or am I missing something?

问题描述

我正在使用Select2(版本3.4.0)填充标签列表.这些标签通过ajax调用与现有标签匹配，并且我正在使用createSearchChoice允许创建新标签.到目前为止，代码可以正常工作，并且看起来像这样:

I'm using Select2 (version 3.4.0) to populate a tag list. The tags are matched against existing ones via ajax call, and I'm using createSearchChoice to allow creating new tags. The code works so far, and looks something like this:

$(mytags).select2({
    multiple: true,
    placeholder: "Please enter tags",
    tokenSeparators: [ "," ],
    ajax: {
        multiple: true,
        url: myurl,
        dataType: "json",
        data: function(term, page) {
            return {
                q: term
            };
        },
        results: function(data, page) {
            return data;
        }
    },
    createSearchChoice: function(term) {
        return {
            id: term,
            text: term + ' (new)'
        };
    },
});

所有标准格式，但请注意在createSearchChoice中附加的(new).我需要用户知道这不是预先存在的标签.

All pretty standard, except note the appended (new) in createSearchChoice. I need users to know that this is not a preexisting tag.

它按预期方式工作:如果我开始输入"new-tag"，则会在列表顶部显示"new-tag(new)"标签，如果选择它，标签列表中将包含"new-标签(新)".如果标签已经存在，则Select2将检测到该匹配，并且不会创建(新)"选择.按回车键或单击匹配项按预期进行.

It works as expected: if I start typing "new-tag", I get "new-tag (new)" tag suggested at the top of the list, and if I pick it, the tag list contains "new-tag (new)", as expected. If the tag already exists, Select2 detects the match, and no "(new)" choice is created. Pressing return or clicking on the match works as expected.

当我在有匹配项的情况下键入逗号(我的单个tokenSeparators条目)时，就会出现问题. Select2关闭该令牌，然后将标签添加到列表中，但附加(新)"标签，即即使它不必使用createSeachChoice的返回值.

The problem appears when I type a comma (my single tokenSeparators entry) while there is a match. Select2 closes that token, and adds the tag to the list, but with the "(new)" label appended, i.e. it uses the return value from createSeachChoice even if it does not have to.

这是Select2中的错误，还是我使用错了(我应该怎么做)?

Is this a bug in Select2, or am I using it wrong (and what should I do instead)?

推荐答案

我不确定这是否是一个错误-无论如何，在GitHub问题跟踪器上没有公开问题涉及此行为，网址为此时此刻.

I 'm not sure if this is a bug or not -- in any case, there is no open issue referring to this behavior at the GitHub issue tracker at this moment.

您基本上可以自己解决此问题.这个想法是createSearchChoice回调必须能够判断term是否引用搜索结果.但是createSearchChoice无法直接访问搜索结果，那么我们如何启用它呢?好吧，通过从results回调内部保存最新一批的搜索结果.

You can mostly fix the behavior yourself though. The idea is that the createSearchChoice callback must be able to tell if term refers to a search result or not. But createSearchChoice does not have direct access to the search results, so how can we enable that? Well, by saving the latest batch of search results from inside the results callback.

var lastResults = [];

$(...).select2({
    ajax: {
        multiple: true,
        url: "/echo/json/",
        dataType: "json",
        type: "POST",
        data: function (term, page) {
            return {
                json: JSON.stringify({results: [{id: "foo", text:"foo"},{id:"bar", text:"bar"}]}),
                q: term
            };
        },
        results: function (data, page) {
            lastResults = data.results;
            return data;
        }
    },
    createSearchChoice: function (term) {
        if(lastResults.some(function(r) { return r.text == term })) {
            return { id: term, text: term };
        }
        else {
            return { id: term, text: term + " (new)" };
        }
    }
});

此代码使用 Array.some ，因此您需要比IE8更好的东西(这是select2的最低要求)来运行它，但是当然可以模拟该行为.

This code uses Array.some so you need something better than IE8 (which is the select2 minimum requirement) to run it, but of course it is possible to emulate the behavior.

查看实际效果 .

See it in action.

但是，美中不足的是:只有当已经收到与当前搜索词相对应的搜索结果时，此代码才能正确运行.

There is, however, a fly in the ointment: this code works correctly only if the search results corresponding to the current search term have been already received.

这应该很明显:如果您快速键入并创建一个与现有标签相对应的搜索词，但是在包含该标签的搜索结果到达之前按逗号，则createSearchChoice将测试该​​标签是否在现有标签中先前收到的搜索结果.如果这些结果不不包含标签，则标签将显示为新"，即使没有.

This should be obvious: if you type very fast and create a search term that corresponds to an existing tag but hit comma before the search results that include that tag have arrived, createSearchChoice will be testing for the tag's presence among the previously received search results. If those results do not include the tag, then the tag will be displayed as "new" even though it is not.

不幸的是，我不认为您可以采取任何措施来防止这种情况的发生.

Unfortunately I don't believe there is anything you can do to prevent this from happening.

这篇关于Select2与createSearchChoice配合使用新创建的键盘输入选项，即使存在匹配，错误或我遗漏了某些东西?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！