¿Cómo podemos obtener el ID de las etiquetas seleccionadas usando Jquery tagit?
-
11-12-2019 - |
Pregunta
Tengo un campo de etiqueta de entrada y quiero obtener la identificación de los tagos seleccionados para que lo intente http://jsfiddle.net/u8zj5/19/ Pero mi problema quiero que la etiqueta o el valor no pasen a id="show"
pero fallé.
<input type="text" id="field1" name="field1" value=""/>
<span id="show">show ID here</span>
jQuery(document).ready(function(){
var availableTags = [{"id":"144","label":"Allicelabel","value":"Allice value"}];
jQuery("input#field1").each(function(){
var target = jQuery(this);
var currenttags = target.val();
target.hide()
.after("<ul class=\"tags\"><li>"+currenttags+"</li></ul>");
var instance = target.next();
instance.tagit({
tagSource:availableTags,
tagsChanged:function () {
var tags = instance.tagit('tags');
var tagString = [];
for (var i in tags){
tagString.push(tags[i].value);
}
$("#show").html(tagString.join(','));
},
sortable:true,
triggerKeys: ['enter', 'comma', 'tab']
});
});
});
Alguien aquí que haya usado jQuery Tagit (página de demostración) Podría ayudarme a resolver esto
Solución
Tuve el mismo problema y lo que hice fue modificar tag-it.js.Cuando llamas a la función select necesitas enviar el ID
a través de la función _addTag
self._addTag(ui.item.label, ui.item.value, ui.item.id);
Entonces sólo necesitas obtener la identificación:
_addTag: function(label, value, id) {
...
this._addSelect(label, value, id);
...
}
Y aquí anexa el ID
en una selección oculta
_addSelect: function(label, value, id) {
var opt = $('<option>').attr({
'selected':'selected',
'value':id
}).text(label);
this.select.append(opt);
Con esto puede tener una etiqueta para la lista de autocompletar, un valor para mostrar en la etiqueta y el ID
en una selección oculta.
Otros consejos
Tuve el mismo problema, pero no quería alterar el comportamiento predeterminado del complemento.Entonces, en su lugar, utilicé los ganchos proporcionados para agregar un nuevo comportamiento.
var availableTags = [
{
label: "myTag",
value: "myTag",
id: 1
},
//etc...
];
var assignedTags = [];
$('#singleinputfield').tagit( {
tagSource: function (request, response) {
//setup the search to search the label
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(availableTags, function (value) {
return matcher.test(value.label);
}));
},
beforeTagAdded: function(event, ui){
//get id for that tag and signal if it was in the tagSource list
var id, result = false;
$.each(availableTags, function(){
if(ui.tagLabel === this.label){
result = true;
id=this.id;
return false;
}
});
if(result){
//put id in the list of ids we are using
assignedTags.push(id);
}
return result;
},
afterTagAdded: function(event, ui){
//replace the values in the single input field with the assigned ids
$('#singleinputfield').val(assignedTags.join(','));
},
afterTagRemoved: function(event, ui){
$('#singleinputfield').val(assignedTags.join(','));
},
beforeTagRemoved: function(event, ui){
var id;
//get the id for the removed tag and signal if it was in the tagSource list
$.each(availableTags, function(){
if(ui.tagLabel === this.label){
result = true;
id = this.id;
return false;
}
});
if(result){
//remove the unassigned tag's id from our list
assignedTags = $.grep(assignedTags, function(el){
return el != id;
});
}
}
});
Utilice algún otro complemento como Select2.De hecho, ha recibido apoyo para esto.