Complemento jQuery Autocompletar que se activa después del token

Question

Estoy creando una aplicación y me gustaría hacer una autocompletar dentro de un área de texto, muy parecido a cómo Twitter/Facebook hace el suyo con @ [nombre]. Sin embargo, me gustaría que se dispare cuando ingrese [TID: x], donde x es un número entero de cualquier longitud.

Parece que Twitter/Facebook inicia su autocompletar después de presionar el signo @, y luego envía los datos de texto después de la autocompletar. ¿Alguien tiene alguna idea de si el plugin jQuery UI (o cualquier otro plugin) puede hacer algo como esto?

Answer 1

Esto es realmente posible. Puede tocar en eventos del widget de autocompletar (search y select) para lograr esto:

var triggered = false; 
var trigger = "TDI:"; 

$("input").autocomplete({ 
    source: [...], 
    search: function() { 
     if (!triggered) { 
      return false; 
     } 
    }, 
    select: function(event, ui) { 
     var text = this.value; 
     var pos = text.lastIndexOf(trigger); 

     this.value = text.substring(0, pos + trigger.length) + 
      ui.item.value; 

     triggered = false; 

     return false; 
    }, 
    focus: function() { return false; }, 
    minLength: 0 
}).bind("keyup", function() { 
    var text = this.value; 
    var len = text.length; 
    var last; 
    var query; 
    var index; 

    if (triggered) { 
     index = text.lastIndexOf(trigger); 
     query = text.substring(index + trigger.length); 
     $(this).autocomplete("search", query); 
    } 
    else if (len >= trigger.length) { 
     last = text.substring(len - trigger.length); 
     triggered = (last === trigger); 
    } 
}); 

demo aquí: http://jsfiddle.net/andrewwhitaker/kCkga/

Notas:

• Este es un muy limitado demostración . No funcionará si intentas que se autocomplete en el medio de la cadena.
• Para completar este ejemplo, necesitaría hacer algún trabajo para averiguar la posición del cursor en el campo de entrada e insertar el texto en su lugar
• Probablemente otros errores, pero definitivamente creo que es factible. Espero que esto te haga comenzar.

Answer 2

He creado un complemento para eso, que usa el autocompletado de jQuery-UI y el ejemplo de Andrew (gracias por eso).

Url: https://github.com/experteer/autocompleteTrigger

Demostración: http://jsfiddle.net/dmattes/2YRgW/1/

$('input,textarea').autocompleteTrigger({ 
    triggerStart : '@', 
    triggerEnd: '', 
    source: [ 
    "Asp", 
    "BASIC", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
    ] 
}); 

mejor, Daniel