Znaczniki: ograniczenie tworzenia znacznika do podanej listy poprzez ajax

Question

używam plugin jQuery UI dla tagging:

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

im posiadające kilka problemów:

1. gdy użytkownik wybierze z listy chcę zapisać identyfikator i wartość tego tagu.

2. tworzyć tylko znaczniki z listy sprowadzeni przez AJAX zadzwonić

   $(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']}); 
   }); 
   

Answer 1

w odpowiedzi na widelcu drugie pytanie Chris Leishman w repozytorium Tag-it zawiera nową właściwość requireAutocomplete która pozwala tylko elementy na liście autouzupełniania, które mają być używane jako znaczniki.

Można znaleźć jego prośbę Pociągnąć tutaj: https://github.com/aehlke/tag-it/pull/37

pobrać tę wersję pliku JS od: https://github.com/chrisleishman/tag-it

i używać go jak własności zwykłej:

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

chodzi o twój pierwszy pytanie, sam nad tym pracuję, więc zaktualizuję odpowiedź, gdy znajdę rozwiązanie.

Zrobiłem poprawkę do własnych lokalnych TagIt.js na linii 271 zmienia:

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

do

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

która stała się kwestią przy czym identyfikator pozycji pokazuje zamiast etykieta po wybraniu opcji z listy autouzupełniania.

Aktualizacja

Oto kilka informacji o tym, jak zapisać identyfikatory każdego tagu.

Pierwszą rzeczą, którą zrobiłem, było przesłonięcie metody createTag w celu uwzględnienia parametru labelName (możesz zmodyfikować oryginał, jeśli chcesz, po prostu go zastąpiłem).

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

Trim nazwaEtykiety w taki sam sposób, że obecna wartość param jest przycięta:

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

zmienić zmienną etykieta do korzystania z nowego nazwaEtykiety:

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

W sekcji autouzupełniania źródła pierwotnego Zmieniam wywołanie createTag, aby dodać nową etykietę:

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

Answer 2

to rozwiązanie jest do obsługi wielu wartości i odpowiedź na pytanie:

gdy użytkownik wybiera z listy, chcę zapisać identyfikator i wartość dla tego tagu.

Jego inspirowane rozwiązania powyżej (tak trzeba by przeczytać, że: -)):

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

następnie w funkcji createTag

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

teraz pobrać tagi, wystarczy utworzyć funkcja

assignedTagsData : function(){ 
     // Only to be used when singleField option is not seletced 
     var tags = []; 

     this.tagList.children('.tagit-choice').each(function() { 
       tags.push($(this).data('tag_item_data')); 
      }); 
     return tags; 

    }