2012-04-12 17 views
5

verdiği listeye etiket oluşturma sınırlayıcı i etiketleme için bir jquery ui eklentisi kullanıyorum:TagIT: ajax

https://github.com/aehlke/tag-it

im sahip bazı sorunlar:

  1. bir kullanıcının seçtiği listeden, kimliği ve bu etiketin değerini kaydetmek istiyorum.

  2. sadece Etiket-It depo senin ikinci soru Chris Leishman en çatal cevap olarak

    $(function() { 
        $('#tags').tagit({tagSource:function(request, response) { 
    $.ajax({ 
    type:"GET", 
    url: "http://some_link", 
    dataType: "jsonp", 
    data:{ 
        term:request.term, 
        }, 
        success: function(data) { 
         response($.map(data, function(item) { 
          return { 
           label: item.label, 
           value: item.value, 
           id:item.id 
          }; 
         })); 
        } 
        }); 
    } 
    , triggerKeys: ['enter', 'comma', 'tab']}); 
    }); 
    

cevap

5

çağrı AJAX tarafından geri getirdi listeden etiketleri oluşturmak sadece izin veren yeni bir özellik requireAutocomplete içeriyor etiket olarak kullanılacak otomatik tamamlama listesindeki öğeler.

Tuzhilin'in çekme isteğini bulabilirsiniz: https://github.com/aehlke/tag-it/pull/37

İndir JS dosyasının bu sürümü: https://github.com/chrisleishman/tag-it

ve sıradan bir özellik gibi kullanabilirsiniz: İlk gelince

$(selector).tagit({ 
     requireAutocomplete: true, 
     tagSource: [...] 
}); 

soru, kendim üzerinde çalışıyorum bu yüzden bir çözüm bulduğumda cevabımı güncelleyeceğim. öğelerin Kimliği yerine gösterir sayede

var tag = that.createTag(ui.item.value); 

sorunu sabit

var tag = that.createTag(ui.item.label); 

için:

Satır 271 değişen benim kendi yerel TagIt.js bir değişiklik yaptık Otomatik tamamlama listesinden bir seçenek belirledikten sonra etiket.

Güncelleme

İşte her etiketin kimlikleri kaydetmek için bazı bilgi.

Yaptığım ilk şey, bir labelName parametresi eklemek için createTag yöntemini geçersiz kılmaktı (eğer isterseniz orijini değiştirebilirsin, sadece onu geçersiz kılmayı tercih ettim).

$.ui.tagit.prototype.createTag = function (labelName, value, additionalClass) { 
// The origional code from createTag here 
} 

akım değeri param kesilmiş olması aynı şekilde LabelName Trim: otomatik tamamlama bölümünde

var label = $(this.options.onTagClicked ? 
     '<a class="tagit-label"></a>' : 
     '<span class="tagit-label"></span>').text(labelName); 

:

value = $.trim(value); 
labelName = $.trim(labelName) 

Etiketi değiştir değişkeni yeni LabelName kullanmak Yeni kaynak eklemek için createTag çağrısını değiştiriyorum:

kullanıcı listeden seçer

i id ve bu etiket için değeri kaydetmek istiyorum:
+0

, bu gerçekten işe yaradı .. –

+0

ilk soru ile ilgili olarak, tagit kaydeder t o gizli bir alanda değerleri seçti, ne istediğimi 2 gizli alan ayarlamaktır .. demek istediğim var 1. tam adı, kısa adı ve kimliği .. seçildiğinde, kısa adı görüntülemek istiyorum, ama ben Tam adı ve kimliği ayrı ayrı kaydetmek istiyorsanız, –

+0

gizli alanın içinde json formatında kaydedersem iyi bir fikir mi düşünüyorsunuz? –

0

bu çözüm soruya birden çok değer ve cevap taşıma içindir. Sadece oluşturmak etiketlerini almak için createTag fonksiyonu şimdi

var item = value; 
value = item.value; 
... 
var tag = $('<li></li>') 
      .data('tag_item_data',item)// add this line 
      .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all') 
      .addClass(additionalClass) 
      .append(label); 

sonra

var tag = that.createTag(ui.item); // since ui.item will have everything, label, value, id and other things 

:) -: Yukarıdaki çözüm esinlenerek

Onun (böylece okumak gerekir) Bir fonksiyon

+0

Enter'u nasıl yönlendirdiniz, çünkü öneriyi seçmek için eneter'e bastığınızda otomatik tamamlama seçimi yapılmaz. Ben gidiyorum ve etiket kütüphane _cleanedInput çağırır düşünüyorum –