jQuery Tag-it : 하나의 목록에서 다른 태그로 복사

Question

두 개의 jQuery Tag-it이 있는데 하나의 ul 목록에서 다른 태그로 모든 태그를 복사하는 jQuery 함수가 필요합니다.

두 목록의 정의 :

$('#keywordList1').tagit({ 
     itemName : 'item', 
     fieldName : 'tags', 
     caseSensitive : false, 
     allowSpaces : true 
}); 

$('#keywordList2').tagit({ 
     itemName : 'item2', 
     fieldName : 'tags', 
     caseSensitive : false, 
     allowSpaces : true 
}); 

편집 :

제 1 회 솔루션에서 thecodeparadox

$('#keywordList2').append($('#keywordList1 li').clone()) 

작품,하지만 당신은 정기적으로 볼 때 태그 - 그것은 입력 필드 fo를 생성한다. r 마지막 ​​<li> 요소 (클래스 tagit-new)로 둘러싸인 새 태그를 입력하십시오.

<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> 

keywordList2

<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> 

을

keywordList1 :

APPEND와 용액 대상리스트가 지금 개의 입력 필드을 보유하는 효과를 갖는다

어떻게하면 첫 번째 입력 요소를 제거 할 수 있습니까?

EDIT2 : thecodeparadox에서 업데이트 된 솔루션은 매우 잘 작동합니다. 첫 번째 <li>이 (입력 필드를 채) 목록의 끝으로 이동되도록 내가 스크립트를 확장 한 :

$('#keywordList2').append($('#keywordList1 li:not(:last)').clone()) 
$('#keywordList2').append($('#keywordList2 li:first')) 

내가 IST는 jQuery를 스타일에 짧은 쓸 수있는 확신

Answer 1

나는 묻기 전에 jQuery Tag-it의 문서를 읽었어야했다!

이

$($('#keywordList1').tagit('assignedTags')).each(function() { 
     $('#keywordList2').tagit('createTag', this); 
    }); 

가장 큰 장점 경악 createTag-작업이 태그 만이 대상 목록에 존재하지 않는, 추가되었는지 확인합니다 것을 :

정확히 내가 필요로 무엇을 할 수 jQuery Tag-it methods 있습니다.

Answer 2

  $('#keywordList1').tagit({ 

       onTagClicked: function(event,ui){ 
        $('#keywordList2').tagit("createTag",ui.tagLabel); 
       } 

      });