如何从包含分隔符“USE”的结果中创建新标记?

你可以使用 formatSelection 方法更改所选选项的显示方式。

下面是一个示例:

function format(state) {
  if (state.text.indexOf('USE') !== -1) {
    return state.text.substring(state.text.indexOf('USE') + 4, state.text.length);
  }
  return state.text;
}

$('#test').select2({
  data:[
    {id:0,text:"enhancement"},
    {id:1,text:"bug"},
    {id:2,text:"duplicate USE copy"},
    {id:3,text:"invalid USE wrong; incorrect"},
    {id:4,text:"wontfix"}
  ],
  multiple: true,
  width: "300px",
  formatSelection: format,
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>

<input type="hidden" id="test" />

    $('.productName').select2({            
        ajax: {
            url: "DBHandler.php",
            dataType: 'json',
            type: "GET",
            delay: 250,
            data: function (params) {   
                return {
                    key: params.term // search term
                };
            },
            processResults: function (data) {                       
                return {
                    results: data
                };
            },                
            cache: true
        },
        placeholder: 'Keyword/keyphrase search...',
        minimumInputLength: 2,   
        tags: true
    }).on("select2:select", function(e) {  
        var valueToRemove = e.params.data.id; 
        if(valueToRemove.toString().includes(" USE "))
        {
            var splitValues = valueToRemove.toString().split(" USE "); 
            if(!splitValues[1].toString().includes(";"))
            {                  
                alert("value does not contain ;");
                new_data = $.grep($('.productName').val(), function(id){return id !== valueToRemove;});
                alert("new data: " + new_data);

                $('.productName > option').prop("selected", false);
                $('.productName').val(new_data).trigger('change');  

                $('.productName').append("<option value = '" + splitValues[1].toString().trim() + "' selected>" + splitValues[1].toString().trim() + "</option>");              
            }
            else
            {
                var splitKeys = splitValues[1].toLocaleString().split(";");
                new_data = $.grep($('.productName').val(), function(id){return id !== valueToRemove;});
                $('.productName > option').prop("selected", false);
                $('.productName').val(new_data).trigger('change');  

                splitKeys.forEach(function(item)
                {
                    alert(item);
                    $('.productName').append("<option value = '" + item.toString().trim() + "' selected>" + item.toString().trim() + "</option>");
                });                    
            }
        }           
    });

onSelect代码是解决这个问题的关键。

on("select2:select", function(e) {...});

" USE " InputField 价值观

var valueToRemove = e.params.data.id; 

然后,我使用 作为分隔符。如果关键字位于 不包含分号 ; ,我创建了一个数组 new_data 的当前值,正在选择的值除外。然后,使用取消选择所有当前选定值 $('.productName > option').prop("selected", false); 。接下来,我使用 $('.productName').val(new_data).trigger('change'); 最后,我附加了使用从原始选定值中提取的新关键字 $('.productName').append("<option value = '" + splitValues[1].toString().trim() + "' selected>" + splitValues[1].toString().trim() + "</option>"); “使用” 示例关键字: Not smart USE dumb dumb 在中显示为关键字 输入字段

        if(valueToRemove.toString().includes(" USE "))
        {
            var splitValues = valueToRemove.toString().split(" USE "); 
            if(!splitValues[1].toString().includes(";"))
            {                  
                alert("value does not contain ;");
                new_data = $.grep($('.productName').val(), function(id){return id !== valueToRemove;});
                alert("new data: " + new_data);

                $('.productName > option').prop("selected", false);
                $('.productName').val(new_data).trigger('change');  

                $('.productName').append("<option value = '" + splitValues[1].toString().trim() + "' selected>" + splitValues[1].toString().trim() + "</option>");              
            }
            else{
                .
                .
                .
            }
        }

如果关键字位于 包含分号 “使用” 关于分号 ; var splitKeys = splitValues[1].toLocaleString().split(";"); 输入字段 .接下来,我采取完全相同的步骤重新填充

1. new_data = $.grep($('.productName').val(), function(id){return id !== valueToRemove;});

2. $(“.productName>选项”)。道具(“选定”,假);

3. $(“.productName”).val(新的_数据)。触发器('change');

splitKeys.forEach(function(item) { alert(item); $('.productName').append("<option value = '" + item.toString().trim() + "' selected>" + item.toString().trim() + "</option>"); });

这可以处理“USE”之后有多个关键字的情况。示例关键字: Not smart USE dumb; stupid .当选择时 stupid 在输入字段中显示为关键字。

    if(valueToRemove.toString().includes(" USE "))
        {
            var splitValues = valueToRemove.toString().split(" USE "); 
            if(!splitValues[1].toString().includes(";"))
            {                  
                .
                .
                .           
            }
            else{
                var splitKeys = splitValues[1].toLocaleString().split(";");
                new_data = $.grep($('.productName').val(), function(id){return id !== valueToRemove;});
                $('.productName > option').prop("selected", false);
                $('.productName').val(new_data).trigger('change');  

                splitKeys.forEach(function(item)
                {
                    alert(item);
                    $('.productName').append("<option value = '" + item.toString().trim() + "' selected>" + item.toString().trim() + "</option>");
                });                    
            }
        }