选择2 - 避免重复标记

时间:2013-11-23 10:40:44

标签: javascript jquery jquery-select2

如何在Select2输入中避免重复标记?

当我在键盘上键入标签名称时,将字符串添加到输入字段,但是当我从下拉列表中选择标签(来自数据库的结果)时,会将id添加到输入中(在屏幕截图中查看console.log)。所以我可以从列表中选择标签,并从键盘添加相同的标签。

此外,在提交表单时,我需要从下拉列表中找到text个代码,而不是id

console.log

Full resolution

HTML:

<input type="hidden" id="categories" name="categories" style="width:100%" value="${categories}">

JS:

$("#categories").select2({
    tags: true,
    tokenSeparators: [","],
    placeholder: "Dodaj",
    multiple: false,
    minimumInputLength: 3,
    maximumInputLength: 50,
    maximumSelectionSize: 20,
    ajax: {
        quietMillis: 150,
        url: '${request.route_url("select2")}',
        dataType: 'json',
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10,
                page: page,
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {results: data.categories, more: more};
        }
    },
    initSelection: function (element, callback) {
        var data = [];
        $(element.val().split(",")).each(function () {
            data.push({id: this, text: this});
        });
        callback(data);
    },
    createSearchChoice: function (term) {
        return { id: term, text: term };
    },
}).change(function (e) {
    if (e.added) {
        console.log($("#categories").val())
        console.log(e)
    }
});

2 个答案:

答案 0 :(得分:0)

有同样的问题,但我想出了解决方法。 我正在获取文本和ID,但是在服务器端我正在使用给定的id新对象创建,这些对象很好阅读。

$tagsArray = explode(',', $tagNames); // it contains of my input select2 value (with ids)

foreach ($tagsArray as $tag)
{
    if (is_numeric($tag))
    {
         $tags->append(TagQuery::create()->filterById($tag)->findOneOrCreate());
    }
    elseif (!empty($tag))
    {
         $tags->append(TagQuery::create()->filterByName($tag)->findOneOrCreate());
    }
}

希望它有所帮助。

答案 1 :(得分:0)

首次使用select 2

然后执行以下操作:

$("select").change(function() {     var tr = $(this).closest("tr");
    tr.find("select option").attr("disabled",""); //enable everything

 //collect the values from selected;
 var  arr = $.map
 (
    tr.find("select option:selected"), function(n)
     {
          return n.value;
      }
  );

//disable elements
tr.find("select option").filter(function()
{

    return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
 }).attr("disabled","disabled");   });