jquery - multiple - tags input bootstrap 4

jQuery Tag-It: uso de una lista de objetos de valor y etiqueta

Question

Acabo de probar el excelente Tag-It! plug-in para jquery ( http://aehlke.github.com/tag-it/ ), pero no puedo hacer que funcione como me gustaría.

Tengo una lista de objetos como esta:

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

Que paso a la opción tagSource en mi configuración:

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

Esto funciona bien, excepto cuando hago clic en el elemento de lista de autocompletar, se muestra el valor numérico en la etiqueta, en lugar del nombre del alimento.

Por lo tanto, es posible tener que ''valor'' ingresado en el campo oculto, y la ''etiqueta'' para mostrar como el nombre de la etiqueta?

Aquí hay una captura de pantalla de lo que quiero decir. El valor está apareciendo en la etiqueta de la etiqueta, y la etiqueta se está perdiendo para el éter ;-)

¿Podría alguien ayudarme aquí? ¡Sería muy apreciado!

Gracias de antemano, Seb

Answer 1

La forma más fácil que he encontrado para resolver este problema es cambiar esta línea en la fuente Javascript de tag-it:

that.createTag(ui.item.value);

a

that.createTag(ui.item.label);

Esto es parte de la sección Autocompletar del código que comienza en la línea 216 en mi editor:

// 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 2

Dentro del archivo tag-it.js donde comentó con // Autocompletar, agregue un foco de opción de evento como lo hice a continuación. Esto debería arreglarlo.

 // 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 3

Lo más fácil es obtener un complemento que realmente lo soporte. Eso es Select2 o Elegido.

Answer 4

Intenté jugar con él, ver: http://jsfiddle.net/pDrzx/46/

Lo que hice:

Extender la función createTag con el nombre de etiqueta

 createTag: function(labelname, value, additionalClass)

Y lo llamó en la creación de etiqueta var

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

Luego me aseguré de que el campo de entrada oculto tuviera el valor numérico (para guardarlo)

  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 + ''][]" />'');
    }

Y finalmente agregué el nombre de etiqueta a la autocompletar y enfocar

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

Entonces, ¿qué es lo que falta? Bueno, debes asegurarte de que pasa el nombre de la etiqueta en todos los métodos createTag, pero eso no debería ser demasiado difícil :)

ACTUALIZADO CON EL ENFOQUE (INSPIRADO POR @Edwin)

Answer 5

Aquí hay otra solución (suponiendo que quiera usar el atributo de identificación de datos):

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

HTML que lo acompaña:

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

Answer 6

Sobrescribir el evento de focus para manejar tanto la etiqueta como el valor no es sencillo. Mi solución consistió en utilizar close para crear la etiqueta usando una referencia guardada del último ui.item de un evento de 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

Hola, acabo de hacerlo para mi proyecto con PHP.

Modifiqué plugins en algún punto, así que use script desde la sección de script jsfiddle.

Mire aquí, he creado un script de par de valores de clave completo 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>

ACTUALIZADO CON ENFOQUE (INSPIRADO POR @Edwin y Marco Johannesen)