jQuery Tag-It - za pomocą listy obiektów wartości i etykiet

Question

Po prostu wypróbowałem doskonałe Tag-It! plug-in dla jquery (http://aehlke.github.com/tag-it/), ale nie mogę go uruchomić tak, jakbym chciał.

Mam listę obiektów tak:

var food = [{value:1,label:'Pizza'},{value:2,label:'Burger'},{value:3,label:'Salad'}]; 

Które mijam do opcji tagSource w mojej konfiguracji:

$("#my_food_tags").tagit({ 
    tagSource: food, 
    singleField: true, 
    singleFieldNode: $("#my_food"), 
    placeholderText: "Start typing a food name" 
}); 

Działa to dobrze, z wyjątkiem gdy klikam listę autouzupełniania pozycja, wyświetla wartość liczbową w tagu, a nie nazwę żywności.

W związku z tym możliwe jest, że w polu ukrytym musi być "wartość", a "etykieta" będzie wyświetlana jako nazwa znacznika?

Oto zrzut ekranu tego, co mam na myśli. Wartość jest wyświetlana w etykiecie znacznika, a etykieta jest stracony dla eteru ;-)

Czy ktoś proszę mi tu pomóc? Byłoby to bardzo docenione!

Dzięki z góry, SEB

Answer 1

Tried zabawy z nim, patrz: http://jsfiddle.net/pDrzx/46/

co zrobiłem:

Extendend funkcja createTag z LABELNAME

createTag: function(labelname, value, additionalClass) 

I wywołał to na etykiecie var

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

potem upewnić się, że pole wejściowe ukryte miał wartość liczbową (do zapisywania celu)

if (this.options.singleField) { 
     var tags = this.assignedTags(); 
     tags.push(value); 
     this._updateSingleTagsField(tags); 
    } else { 
     var escapedValue = value; 
     tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.itemName + '[' + this.options.fieldName + '][]" />'); 
    } 

I wreszcie I dodaje nazwaEtykiety do autouzupełniania i skupić

 // Autocomplete. 
     if (this.options.availableTags || this.options.tagSource) { 
      this._tagInput.autocomplete({ 
       source: this.options.tagSource, 
       select: function(event, ui) { 
        // Delete the last tag if we autocomplete something despite the input being empty 
        // This happens because the input's blur event causes the tag to be created when 
        // the user clicks an autocomplete item. 
        // The only artifact of this is that while the user holds down the mouse button 
        // on the selected autocomplete item, a tag is shown with the pre-autocompleted text, 
        // and is changed to the autocompleted text upon mouseup. 
        if (that._tagInput.val() === '') { 
         that.removeTag(that._lastTag(), false); 
        } 
        that.createTag(ui.item.label,ui.item.value); 
        // Preventing the tag input to be updated with the chosen value. 
        return false; 
       }, 
      focus: function(event, ui) { 
       event.preventDefault(); 
       that.createTag(ui.item.label,ui.item.value); 
      } 
      }); 

Więc jak brakuje, dobrze musisz upewnić się, że przekazuje nazwę etykiety we wszystkich metodach createTag, ale to nie powinno być zbyt trudne :)

---

aktualizowana o ostrości (zainspirowany @Edwin)

Answer 2

Najprostszym sposobem znalazłem rozwiązania tego problemu jest, aby zmienić tę linię w tag-on Javascript źródło:

that.createTag(ui.item.value); 

do

that.createTag(ui.item.label); 

jest to część sekcji autouzupełniania kodu rozpoczynającego się na linii 216 w moim edytorze:

// Autocomplete. 
      if (this.options.availableTags || this.options.tagSource) { 
       this._tagInput.autocomplete({ 
        source: this.options.tagSource, 
        select: function(event, ui) { 
         // Lots of comments here 
         if (that._tagInput.val() === '') { 
          that.removeTag(that._lastTag(), false); 
         } 
         that.createTag(ui.item.value); 
         value. 
         return false; 
        } 
       }); 
      } 

Answer 3

Wewnątrz znacznika-it.plik js, w którym skomentował za pomocą // autouzupełniania, dodaj fokus opcji wydarzenia, tak jak to zrobiłem poniżej. To powinno to naprawić.

// Autocomplete. 
     if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) { 
      var autocompleteOptions = { 
       select: function(event, ui) { 
        that.createTag(ui.item.value); 
        // Preventing the tag input to be updated with the chosen value. 
        return false; 
       }, 
       focus: function(event, ui) { 
        event.preventDefault(); 
        that.tagInput.val(ui.item.label); 
       } 

      }; 

Answer 4

Najłatwiej jest uzyskać wtyczkę, która faktycznie to obsługuje. To jest Select2 lub Wybrane.

Answer 5

Oto kolejny obejście (zakładając, że chcesz użyć atrybutu data-ID):

var clone = $('#tags').clone(); 
    // important to clone before calling tagit() 
    $('#tags').tagit({ 
    beforeTagRemoved: function(event, ui) { 
     var item_id = clone.find('li:contains('+ui.tagLabel+')').data('id'); 
     // do something with item_id/tag ui 
    } 
    }); 

Towarzyszący HTML:

<ul id="tags"> 
<li data-id="38">Item A</li> 
<li data-id="19">Item B</li> 
</ul> 

Answer 6

Zastępowanie focus imprezę obsługiwać zarówno etykietę i wartość nie jest proste. Moje rozwiązanie składało się z wykorzystaniem close stworzyć tag używając zapisanego odniesienie do ostatniego ui.item ze zdarzenia focus:

$$("#search-widget-input") 
.tagit(
    { 
    placeholderText : 'Select or type a location, postcode or Web ID', 
    autocomplete : { 
     delay : 200, 
     minLength : 1, 
     search : function(event, ui) { 
      ... 
     }, 
     select: function(event, ui) { 
      // use the item's label instead of value 
      $$("#search-widget-input").tagit("createTag", ui.item.label, '__value__' + ui.item.value); 
      return false; // prevents the tag input to auto tag the ui.item.value 
     }, 
     focus: function(event,ui) { 
      // `focus` event does not fire `select` but does fires `close` event 
      // so we store our `ui.item` which allows us to reference it in `close` event 
      event.preventDefault(); 
      self.oAutoCompleteSavedLastUiItem = ui.item; 
     }, 
     close: function(event, ui) { 
      event.preventDefault(); 
      $$("#search-widget-input").tagit("createTag", self.oAutoCompleteSavedLastUiItem.label, '__value__' + self.oAutoCompleteSavedLastUiItem.value); 
      return false; // prevents the tag input to auto tag the ui.item.value 
     }, 
     source : function fAutocompleteSource(oRequest, fResponse) { 
      ... 
     } 
     ... 
    } 
    ... 
}); 

Answer 7

Cześć I właśnie to zrobił dla mojego projektu z PHP.

W pewnym momencie zmodyfikowałem wtyczki, więc użyj skryptu z sekcji skryptu jsfiddle.

Spójrz tutaj zrobiłem pełne pracy wartość pary kluczy skrypt https://jsfiddle.net/656pnLsd/

<ul id="tag_list"> 
     <li data-value="2">test2</li> 
<ul> 
<script> 
var tag_sources = [{value:1,label:'test1'},{value:2,label:'test2'}]; 
      console.log(tag_sources); 
      jQuery(document).ready(function() { 
       var eventTags = $('#tag_list'); 
        eventTags.tagit({ 
        availableTags: tag_sources, 
        fieldName: "bento4_tags", 
        singleField: true, 

       }); 
      }); 
</script> 

aktualizowana o ostrości (zainspirowany @Edwin i Marco Johannesen)