a metà testo (come Google Plus)

Question

Ci sono tonnellate di opzioni disponibili per il completamento automatico. La maggior parte sembra funzionare sulle prime lettere digitate.

In Google Plus, un'opzione di completamento automatico scende subito dopo aver digitato @, indipendentemente da dove si trova nel campo modulo, e utilizza le lettere immediatamente successive allo @ per guidare il completamento automatico. (Sembra anche molto bello!)

Qualcuno ha condiviso il codice per fare questo genere di cose?

Qualcuno ha qualche suggerimento per provare a implementare una versione giocattolo di questo (ad esempio in jQuery)?

Answer 1

Ciò è possibile con jQueryUI's autocomplete widget. Nello specifico, è possibile adattare this demo per soddisfare le proprie esigenze. Ecco un esempio:

function split(val) { 
    return val.split(/@\s*/); 
} 

function extractLast(term) { 
    return split(term).pop(); 
} 

var availableTags = [ ... ]; // Your local data source. 

$("#tags") 
// don't navigate away from the field on tab when selecting an item 
.bind("keydown", function(event) { 
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { 
     event.preventDefault(); 
    } 
}).autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     var term = request.term, 
      results = []; 
     if (term.indexOf("@") >= 0) { 
      term = extractLast(request.term); 
      if (term.length > 0) { 
       results = $.ui.autocomplete.filter(
       availableTags, term); 
      } 
     } 
     response(results); 
    }, 
    focus: function() { 
     // prevent value inserted on focus 
     return false; 
    }, 
    select: function(event, ui) { 
     var terms = split(this.value); 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(""); 
     return false; 
    } 
}); 

E qui si sta lavorando: http://jsfiddle.net/UdUrk/

Fatemi sapere se avete bisogno di altre informazioni (ad esempio come farlo funzionare con un DataSource a distanza).

Aggiornamento: Ecco un esempio utilizzando un'origine dati remota (API StackOverflow): http://jsfiddle.net/LHNky/. Include anche la visualizzazione personalizzata dei suggerimenti di completamento automatico.

Answer 2

è possibile utilizzare l'evento di ricerca automatica per rilevare se il testo contiene @. Se non è @, restituire solo false e la funzione di completamento automatico non funzionerà.

esempio: $ (".selector") .autocomplete ({ ricerca: la funzione (evento, ui) {...}} );

Answer 3

Ho scritto un plug-in jQuery basato sulla funzionalità di completamento automatico dell'interfaccia utente jQuery. Qui è la mia soluzione:

http://www.hawkee.com/snippet/9391/

Si chiama così:

$('#inputbox').triggeredAutocomplete({ 
    hidden: '#hidden_inputbox', 
    source: "/search.php", 
    trigger: "@" 
}); 

Answer 4

ho scritto un plugin bootstrap per questo. Funziona indipendentemente da dove si verifica @ nel campo modulo. E 'per div contentEditable piuttosto che un'area di testo: http://sandglaz.github.com/bootstrap-tagautocomplete/

Answer 5

Per dilungarsi risposta di Andrew Whittaker un po', l'opzione source di jQuery UI completamento automatico viene utilizzato per specificare una matrice contenente gli elementi che devono essere visualizzati nella lista a discesa una volta il widget viene attivato. Può essere definito come tale array, una funzione che restituisce tale array o un URL a una risorsa che produce tale array.

Se source è definito come una funzione, i parametri della funzione, request e response, possono essere usati per aiutare comporre la sua matrice di ritorno e fornirlo al widget, rispettivamente. request ti interessa in particolare, dal momento che il suo membro, term contiene il valore dell'elemento di input a cui è apposto il widget, nel momento in cui viene invocata la funzione.

Vedi dove sto andando con questo?È piuttosto semplice, analizzare request.term per il testo tra il simbolo di interesse @ e il cursore e utilizzare quel testo per creare l'array da fornire al widget. Avrai bisogno di fare un po 'di lavoro (o impiegare alcune funzioni già pronte) per essere in grado di localizzare il cursore in modo affidabile in un modo compatibile con i browser, comunque.

Verificare Mentionator se si sta cercando un plug-in esistente che fornisce la funzionalità che si sta tentando di emulare. È ben strutturato, facile da seguire e commentato in modo copioso, quindi dovresti avere pochi problemi a capire come prendere l'approccio che ho descritto. È anche mantenuto dal tuo vero :).