TagIT: limitar la creación de etiquetas a la lista dada por el Ajax

Question

estoy usando un plugin de jQuery UI para el etiquetado:

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

estoy teniendo algunos problemas:

1. cuando un usuario selecciona de la lista, quiero guardar el id y el valor de esa etiqueta.

2. sólo para crear etiquetas de la lista traído de nuevo por el AJAX llamar

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

En respuesta a tenedor del repositorio Tag-it de su segunda pregunta Chris Leishman contiene una nueva propiedad requireAutocomplete que sólo permite elementos en la lista de autocompletar para ser utilizados como etiquetas.

puede encontrar su solicitud de extracción aquí: https://github.com/aehlke/tag-it/pull/37

Descargar esta versión del archivo JS de: https://github.com/chrisleishman/tag-it

y utilizarlo como una propiedad común:

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

En cuanto a su primera pregunta, estoy trabajando en esto yo mismo, así que actualizaré mi respuesta cuando encuentre una solución.

que he hecho una enmienda a mis propios TagIt.js locales en la línea 271 cambiante:

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

a

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

que fijó el problema por el que la identificación de los artículos muestra en lugar de la etiqueta después de elegir una opción de la lista de autocompletar.

actualización

He aquí alguna información sobre cómo guardar las identificaciones de cada etiqueta.

Lo primero que hice fue anular el método createTag para incluir un parámetro labelName (puede modificar el original si lo desea, simplemente preferí anularlo).

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

Recorte el Nombre de etiqueta de la misma manera que el valor de parámetro actual se recorta:

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

cambiar la variable etiqueta para utilizar el nuevo Nombreetiqueta:

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

En la sección de autocompletar de la fuente original cambio la llamada a createTag para incluir la nueva etiqueta:

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

Answer 2

esta solución es para el manejo de múltiples valores y la respuesta a la pregunta: ¿

cuando un usuario selecciona de la lista, quiero guardar el ID y el valor para esa etiqueta.

Su inspirados en la solución anterior (lo que tendría que leer que: -)):

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

a continuación en la función 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); 

ahora para recuperar las etiquetas, basta con crear una función

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; 

    }