2 つのjQuery Tag-itがあり、すべてのタグを 1 つの ul リストから別の ul リストにコピーする jQuery 関数が必要です。
2 つのリストの定義:
$('#keywordList1').tagit({
itemName : 'item',
fieldName : 'tags',
caseSensitive : false,
allowSpaces : true
});
$('#keywordList2').tagit({
itemName : 'item2',
fieldName : 'tags',
caseSensitive : false,
allowSpaces : true
});
編集:
コードパラドックスからの最初の解決策
$('#keywordList2').append( $('#keywordList1 li').clone() )
動作しますが、通常の tag-it リストを見ると、最後の<li>
要素 ( class を使用tagit-new
) にラップされた新しいタグを入力するための入力フィールドが作成されます。
追加を使用したソリューションには、宛先リストに2 つの入力フィールドがあるという効果があります。
キーワード リスト 1
<ul style="position: relative; left: 12px; width: 374px;"
class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all tagit ui-widget-content"
id="keywordList1">
<li
class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span
class="tagit-label">keyword1</span><a class="tagit-close"><span
class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input
type="hidden" name="item[tags][]" value="keyword"
style="display: none;"></li>
<li
class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span
class="tagit-label">keyword2</span><a class="tagit-close"><span
class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input
type="hidden" name="item[tags][]" value="keyword2"
style="display: none;"></li>
<li class="tagit-new"><input type="text"
class="ui-widget-content ui-autocomplete-input" autocomplete="off"
role="textbox" aria-autocomplete="list" aria-haspopup="true">
<input type="text" class="ui-widget-content ui-autocomplete-input"
autocomplete="off" role="textbox" aria-autocomplete="list"
aria-haspopup="true"></li>
キーワード リスト 2
<ul style="position: relative; left: 12px; width: 374px; top: 20px;"
class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all tagit ui-widget-content"
id="keywordList2">
<li class="tagit-new"><input type="text"
class="ui-widget-content ui-autocomplete-input" autocomplete="off"
role="textbox" aria-autocomplete="list" aria-haspopup="true"></li>
<li
class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span
class="tagit-label">keyword1</span><a class="tagit-close"><span
class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input
type="hidden" name="item[tags][]" value="keyword1"
style="display: none;"></li>
<li
class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span
class="tagit-label">keyword2</span><a class="tagit-close"><span
class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input
type="hidden" name="item[tags][]" value="keyword2"
style="display: none;"></li>
<li class="tagit-new"><input type="text"
class="ui-widget-content ui-autocomplete-input" autocomplete="off"
role="textbox" aria-autocomplete="list" aria-haspopup="true"></li>
最初の入力要素を削除する方法はありますか?
EDIT2 : thecodeparadox
からの更新されたソリューションは、はるかにうまく機能します。<li>
最初の(入力フィールドを保持する)がリストの最後に移動するようにスクリプトを拡張しました:
$('#keywordList2').append( $('#keywordList1 li:not(:last)').clone() )
$('#keywordList2').append( $('#keywordList2 li:first') )
ist は jQuery スタイルで短く書けると確信しています