如何从包含分隔符“USE”的结果创建新标签？

时间：2017-06-28 16:55:21

标签： javascript jquery jquery-select2

更新问题

所以我正在运行查询，一些结果具有结构$('.productName').select2({ ajax: { url: "https://api.myjson.com/bins/9t7gz", dataType: 'json', type: "GET", delay: 250, data: function(params) { return { key: params.term // search term }; }, processResults: function(data) { for (var d = 0; d < data.length; d++) { if (data[d].text.includes(" USE ")) { var dataItems = data[d].text.split(" USE "); if (dataItems[1].toString().includes(";")) { var dataKeywordItems = dataItems[1].toString().split(";"); for (var ii = 0; ii < dataKeywordItems.length; ii++) { var option3 = new Option(dataKeywordItems[ii].toString().trim(), dataKeywordItems[ii].toString().trim(), true); $('.productName').append(option3); } } else { var option = new Option(dataItems[1], dataItems[1], true); $('.productName').append(option); } } } return { results: data }; }, cache: true }, placeholder: 'Keyword/keyphrase search...', minimumInputLength: 2, tags: true }).on("select2:select", function(e) { var splitValues = $('.productName').val().toString().split(" USE "); if (splitValues[1].includes("; ")) { var splitKeywords = splitValues[1].toString().split("; "); $('.productName').val(splitKeywords).trigger("change"); alert(splitKeywords.toString()); // for(var i = 0; i < splitKeywords.length; i++) // { // alert(splitKeywords[i].toString().trim()); // $('.productName').val(splitKeywords[i].toString().trim()).trigger("change"); // } } else { $('.productName').val(splitValues[1]).trigger("change"); } });。当用户选择这样的条目时，我希望输入字段显示USE右侧的关键字。感谢@DavidDomain让我为第一个选择工作，但现在我有了一个新问题。在第一次选择之后，选择变得疯狂。我试图创建一个Jsfiddler，但我似乎无法让它正常工作。我直接从IDE复制代码。这是原始project。如果您输入USE并选择其中一个选项，它将完美运行。如果你尝试另一种选择，那就疯了。这是我试图创建的JSFiddle，它显示了我在这一点上所做的工作。

.select2-selection__rendered {
  line-height: 32px !important;
}

.select2-selection {
  height: 34px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <span class='input-group-btn col-lg-12 col-md-12 col-sm-12'>
        <select style="width:70%;" class='productName ' id='productName' width=>

        </select>
        
    </span>
  </div>
</div>
processResults: function (data) {                      
    for(var d = 0; d < data.length; d++)
    {
        if(data[d].text.includes(" USE "))
        {
            var dataItems = data[d].text.split(" USE ");
            if(dataItems[1].toString().includes(";"))
            {
                var dataKeywordItems = dataItems[1].toString().split(";");
                for(var ii = 0; ii < dataKeywordItems.length; ii++)
                {                                    
                    var option3 = new Option(dataKeywordItems[ii].toString().trim(), dataKeywordItems[ii].toString().trim(), true);
                    $('.productName').append(option3);
                }
            }
            else
            {
                var option = new Option(dataItems[1], dataItems[1], true);
                $('.productName').append(option);
            }                            
        }
    }
    return {
        results: data
    };
},

我的代码的两个重要部分如下：

  

ProcessResults：

如果关键字包含“USE”，则会将“USE”右侧的一个或多个关键字动态添加到下拉列表中。

.on("select2:select", function(e) {            
    var splitValues = $('.productName').val().toString().split(" USE ");  

    if(splitValues[1].includes("; "))
    {                 
        var splitKeywords = splitValues[1].toString().split("; ");

        $('.productName').val(splitKeywords).trigger("change");
        alert(splitKeywords.toString());
//                for(var i = 0; i < splitKeywords.length; i++)
//                {
//                    alert(splitKeywords[i].toString().trim());
//                    $('.productName').val(splitKeywords[i].toString().trim()).trigger("change");
//                }
    }
    else
    {
        $('.productName').val(splitValues[1]).trigger("change");
    }

});
  

选择：

这会选择包含“USE”的选定关键字，并在“USE”右侧提取1个或多个关键字，并将它们显示在输入字段中。

func loadJsonFrom(fileName: String) -> NSDictionary {

    let path = Bundle.main.path(forResource: filename, ofType: "json")
    let jsonData = try! Data(contentsOf: URL(fileURLWithPath: path!))
    let jsonResult: NSDictionary = try! JSONSerialization.jsonObject(with: jsonData, options: .allowFragments) as! NSDictionary
    return jsonResult
}

第一个选择的屏幕截图： Screenshot of first select

潜在第二选择的屏幕截图： enter image description here

问题是如何保留第一个选择结果并添加新的第二个选择结果？

2 个答案:

答案 0 :(得分：1)

您可以使用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" />

答案 1 :(得分：0)

我无法让糟糕的JsFiddles工作，所以我将从原来的问题中发布我的答案。过程是一样的。在经过大量搜索并将不同答案混合在一起后，我想出了这个解决方案。

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

然后我使用" USE "作为分隔符来分割此值。如果" USE "右侧的关键字不包含分号;，我会创建一个包含所有new_data＆＃39的数组InputField ; s当前值，除了正在选择的值。然后，我使用$('.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>");附加从原始选定值中提取的新关键字。这处理" USE "之后只有一个关键字的情况。 关键字示例： Not smart USE dumb。如果选择此选项，则dumb会将InputField显示为关键字。

        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{
                .
                .
                .
            }
        }

如果" USE "右侧的关键字包含分号;，我首先将字符串拆分为半" USE "的右侧冒号;使用var splitKeys = splitValues[1].toLocaleString().split(";");。这为我提供了应添加到InputField的所有关键字。接下来，我采取完全相同的步骤重新填充InputField的值。

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

  2. $('.productName > option').prop("selected", false);

  3. $('.productName').val(new_data).trigger('change');

    4. 然后我使用循环添加应该添加到输入字段的所有新关键字：

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

    这处理＆＃34;之后有多个关键字的情况。使用＆＃34;。示例关键字：Not smart USE dumb; stupid。如果选择dumb并且stupid在InputField中显示为关键字。

        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>");
                });                    
            }
        }
相关问题
最新问题