將選擇2輸入轉換爲標記

jQuery插件Select2是否具有用於將字符串轉換爲標記的內置函數？將選擇2輸入轉換爲標記

我希望能夠在用戶將字符串粘貼到Select2字段時調用此標記化函數，以便粘貼的輸入變爲標記。

2013-05-17 Donald Taylor

您可能需要詳細說明。我對這個「Select2」一無所知，但是，如果您使用的是jQuery，那麼解決方案並不難。而且，「令牌」不是字符串嗎？ – SpYk3HH

我從問題中移除了「jquery」標籤，因爲它與特定的插件有關。「令牌」是在自動完成字段中表示爲「塊」的字符串。 –

啊，所以他們是「物體」？ – SpYk3HH

我想我已經解決了這個問題，我用下面的代碼：

// force tokenizing of Select2 auto-complete fields after pasting 
$('body').on('paste', '.select2-input', function() { 
    // append a delimiter and trigger an update 
    $(this).val(this.value + ',').trigger('input'); 
});

這是假定逗號被設置爲在插件的「tokenSeparators」初始化設置分隔符。

來源

2013-05-17 15:48:26

它的作品非常漂亮。謝謝傑克 – Abram

這不適用於我（至少在Firefox中）。 'this.value'似乎總是空的。 – jahu

使用輸入類型文本，並將select2分配給它。像

<input type="text" id="makeTokens" />

，然後在javascript

$("#makeTokens").select2({ 
    placeholder: "Paste data", 
    tags: ["red", "green", "blue"], 
    tokenSeparators: [",", " "] 
});

在標籤

，你可以指定你想讓它顯示爲選擇選項的值，並且使用tokenSeperators到單獨的逗號和空格等文本。

注意：由此產生的輸入值將以逗號分隔的令牌。

來源

2014-07-09 14:21:22 Pramodh

由於某種原因，唐納德的解決方案並不適用於我（也許較新版本的select2行爲有所不同）。這是對我工作：

$('body').on('paste', '.select2-input', function (e) { 
    var pasteData = (e.originalEvent || e).clipboardData.getData('text/plain') || ''; 
    $(this).val(pasteData + ','); 
    e.preventDefault(); 
});

因爲在該點的事件被觸發的.select2-input值是一個空字符串，我extractacted從事件對象粘貼的字符串。顯然，複製操作的默認select2在此之後仍然觸發，所以我必須添加e.preventDefault();以阻止其運行並混淆輸入。

來源

2014-11-03 09:59:57 jahu

只要運行這個jQuery的自動取separatoes從options.tokenSeparators直接，並申請頁面中所有選擇2實例：

$(document).on('paste', 'span.select2', function (e) { 
    e.preventDefault(); 
    var select = $(e.target).closest('.select2').prev(); 
    var clipboard = (e.originalEvent || e).clipboardData.getData('text/plain'); 
    var createOption = function (value, selected) { 
     selected = typeof selected !== 'undefined' ? selected : true; 
     return $("<option></option>") 
      .attr("value", value) 
      .attr("selected", selected) 
      .text(value)[0] 
    }; 
    $.each(
     clipboard.split(new RegExp(select.data('select2').options.options.tokenSeparators.map(function (a) { 
      return (a).replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
     }).join('|'))), 
     function (key, value) { 
      if (value && (!select.val() || (select.val() && select.val().indexOf('' + value) == -1))) { 
       select.append(createOption(value)); 
      } 
     }); 
    select.trigger('change'); 
});

來源

2016-05-03 14:12:07 Shqear

對於4.0.1版本：

$('#my-select').data('select2').dataAdapter.$search.val("tag1,tag2,").trigger("input");

這將增加兩個標籤：tag1和tag2（注意尾隨,）。

重要說明：您應該將data: []添加到select2初始參數中。

來源

2017-01-09 17:59:48 Styx

在將事件觸發爲'keyup'後，這對我有用。 '$ j（'＃searchTerm'）。data（'select2'）。dataAdapter。$ search.val（「tag1，tag2，」）。trigger（「keyup」）; –

將選擇2輸入轉換爲標記

回答

相關問題