2012-12-11 4 views
3

자동 제안 및 태그 지정을 처리하기 위해 jQuery 플러그인 Tag-It을 사용하고 있습니다. Ajax 호출을 사용하여 데이터를 가져 오는 중입니다. 순간ID를 보내지 만 레이블을 표시합니다.

데이터는 다음과 같은 형식으로 반환됩니다 :

{"itemID":"ItemName"} 

예를 들어 : 이것은 좋은 것입니다

{"1":"Yellow","2":"Green"} 

. 하는 방법을 알아 내기 위해

<input type="hidden" name="tag['itemID']['itemName']"/> 

내가없는 것 :

는 내가 뭘 원하는 반환 된 태그에 사용자가 클릭을 가지고 있고,이 같은 숨겨진 필드 뭔가에 저장된 데이터를 가지고있다 그것은,이 모든 경험을 가진 사람이 있고 올바른 방향으로 나를 가리킬 수 있습니까?

+0

에서이 솔루션의 작동 예를 참조하십시오? – Liam

답변

3

이렇게하려면 자동 완성 Ajax 호출에서 반환되는 추가 데이터를 Tag-it 태그 이벤트로 전달해야합니다.

자동 완성 항목에서 추가 데이터를 저장하는 데 사용됩니다 범위에 변수 itemId 추가

: 태그 동작을 만들 수 있도록

{ 
    var itemId; 

이 태그 요소에 대한 참조를 가져옵니다은

를 호출 할 수 있습니다
var theTags = $('#tags'); 

    theTags.tagit({ 

다음 태그를 생성, 자동 완성의 select 이벤트를 처리하고 선택한 자동 완성 항목에서 추가 데이터를 저장합니다.

 autocomplete: { 
      source: [{id:1,value:'New 1'},{id:2,value:'New 2'}], 
      select: function(event,ui) { 
       itemId = ui.item.id; 
       theTags.tagit("createTag", ui.item.value); 
       return false; 
      } 
     }, 

Tag-it의 afterTagAdded 이벤트를 처리하십시오. 여기서 방금 추가 된 태그를 수정하는 모든 사용자 정의 동작을 구현할 수 있습니다. 당신은 데이터가 아약스에 의해 반환되는 것을 말할 때

 afterTagAdded: function(event, ui) { 
      if (itemId) { 
       $(ui.tag).find('input') 
        .attr('name', "tag[\'" + itemId+ "']['" + ui.tagLabel + "']"); 
       itemId = null; 
      } 
     } 
    }); 
} 

당신이 추가 할 수 태그 목록을 얻기 위해 자동 완성 기능을 사용하는 것을 의미합니까, http://jsfiddle.net/DCJsj/

+0

완벽한! 팁 주셔서 감사. 지금이 작업을 관리 할 수 ​​있습니다. – Amo

관련 문제