jquery - tag - Etiquetas autocompletas con forzado y texto libre

tags jquery

Question

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/

Answer 1

Como usaste el complemento tag-it ... he agregado un controlador a la entrada para manejarlo

1. @@ para mostrar autocompletado mientras escribe
2. 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);
    });
});

Answer 2

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:

https://github.com/mizzao/meteor-autocomplete