jquery - tag - Etiquetas autocompletas con forzado y texto libre
tags jquery (2)
Necesito tener un cuadro de texto de líneas múltiples con un texto libre permitido, pero si comienzo caracteres de mecanografía: "@@"
el cuadro de autocompletar con etiquetas disponibles debería aparecer y permitirme seleccionar etiquetas de los existentes, y los caracteres "@@" no deberían estar presentes en el nombre de la etiqueta.
Actualmente estoy jugando con el complemento tag-it para la interfaz de usuario de jquery, pero no entiendo cómo permitir texto libre y solo escucho el cuadro de autocompletar en "@@" enter. y cómo usar el área de texto en lugar de la entrada normal.
Además, me gustaría forzarlos a seleccionar de la lista si ingresan @@ y no permiten escribir texto libre (la primera selección disponible sería buena)
Javascript:
$(document).ready(function() {
//The demo tag array
var availableTags = [
{value: 1, label: ''tag1''},
{value: 2, label: ''tag2''},
{value: 3, label: ''tag3''}];
//The text input
var input = $("input#text");
//The tagit list
var instance = $("<ul class=/"tags/"></ul>");
//Store the current tags
//Note: the tags here can be split by any of the trigger keys
// as tagit will split on the trigger keys anything passed
var currentTags = input.val();
//Hide the input and append tagit to the dom
input.hide().after(instance);
//Initialize tagit
instance.tagit({
tagSource:availableTags,
tagsChanged:function () {
//Get the tags
var tags = instance.tagit(''tags'');
var tagString = [];
//Pull out only value
for (var i in tags){
tagString.push(tags[i].value);
}
//Put the tags into the input, joint by a '',''
input.val(tagString.join('',''));
}
});
//Add pre-loaded tags to tagit
instance.tagit(''add'', currentTags);
});
html:
<p>This example shows how to use Tagit on an input!</p>
<input type="text" id="text" name="tags" value="one,two,three"/>
probando aquí: http://jsfiddle.net/hailwood/u8zj5/
Como usaste el complemento tag-it ... he agregado un controlador a la entrada para manejarlo
-
@@para mostrar autocompletado mientras escribe - Texto libre si se escribe sin
@@
Todavía necesito tiempo para mirar el texto No permitir texto si se escribe @@
DEMO: http://jsfiddle.net/xBgfJ/2/ y debajo está el código completo,
Nota: El código siguiente se ajusta al código de complemento existente.
$(document).ready(function() {
//The demo tag array
var availableTags = [{value: 1, label: ''tag1''},{ value: 2,label: ''tag2''}, { value: 3, label: ''tag3''}];
//The text input
var input = $("input#text");
//The tagit list
var instance = $("<ul class=/"tags/"></ul>");
//Store the current tags
//Note: the tags here can be split by any of the trigger keys
// as tagit will split on the trigger keys anything passed
var currentTags = input.val();
//Hide the input and append tagit to the dom
input.hide().after(instance);
//Initialize tagit
instance.tagit({
tagSource: availableTags,
tagsChanged: function() {
//Get the tags
var tags = instance.tagit(''tags'');
var tagString = [];
//Pull out only value
for (var i in tags) {
tagString.push(tags[i].value);
}
//Put the tags into the input, joint by a '',''
input.val(tagString.join('',''));
},
onTagAdded: function() {
inpNext.parent().find(''.pre-filter'').remove();
}
});
//Add pre-loaded tags to tagit
instance.tagit(''add'', currentTags);
var inpNext = input.next();
var autoCompelteMenu = $(''.ui-autocomplete'', inpNext);
inpNext.on(''keydown'', ''.tagit-input'', function(e) {
var $parent = $(this).parent();
var $preFilter = $parent.find(''.pre-filter'');
if (e.which == 8 && this.value == '''') { //backspace
$preFilter.remove();
} else if (e.which == 9 || e.which == 32
|| e.which == 188 || e.which == 44 ||
e.which == 13 ) { //tab or space, comma and enter
$preFilter.remove();
autoCompelteMenu.css(''opacity'', 0);
}
}).on(''keypress'', ''.tagit-input'', function(e) {
var $parent = $(this).parent();
var $preFilter = $parent.find(''.pre-filter'');
if (e.which == 64 && !$preFilter.length) {
$parent.prepend(''<span class="pre-filter hidden">@</span>'');
autoCompelteMenu.css(''opacity'', 0);
} else if ( e.which == 64 && $preFilter.length) {
e.preventDefault();
this.value = '''';
$preFilter.append(''@'').removeClass(''hidden'');
autoCompelteMenu.css(''opacity'', 1);
}
return;
}).on(''blur'', ''.tagit-input'', function() {
$(this).parent().find(''span'').remove();
autoCompelteMenu.css(''opacity'', 0);
});
});
Creé un paquete Meteor para esto, que permite tanto fuentes de autocompletado como de texto libre. El modelo de datos de Meteor permite una búsqueda rápida de múltiples reglas con listas renderizadas personalizadas. Si no está usando Meteor para su aplicación web, (creo) desafortunadamente no encontrará nada tan asombroso para la autocompletación.
Autocompletar usuarios con @ , donde los usuarios en línea se muestran en verde:
En la misma línea, autocompletar algo más usando ! con metadatos e iconos de arranque:
Bifurcar, tirar y mejorar: