jquery Autocomplete Textbox, wenn es mit einem Sonderzeichen wie @

Question

beginnt Ich suche nach einer Lösung (vorzugsweise jquery), um nur dann automatisch zu vervollständigen, wenn der Typ in einem Sonderzeichen. zB:

„@name“ Nachschlag einen Namen in der Namensliste „#tagname“ Nachschlag Wert in der Tag-Liste „$ Aufgabe“ Nachschlag einen Wert aus der Aufgabenliste

Also, wenn ich will Weisen Sie jemanden, den ich eintippe, eine Aufgabe zu: "@peter $ sales #new #opportunity"

Ich hoffe, dass einige mir helfen können. Ich nehme an, es gibt ein jquery (oder ähnliches) Plugin da draußen.

Answer 1

Ich habe eine Lösung auf GitHub gefunden: https://github.com/yuku-t/jquery-textcomplete (Danke yuku-t für das Schreiben dieses nette Plugin!).

Zuerst sind <script src="path/to/jquery.js"></script> <script src="path/to/jquery.textcomplete.js"></script>

Die html

<textarea class="form-control" id="textarea" rows="4" style="position: relative; outline: 0px; background: transparent;"></textarea>

Das Skript

$('textarea').textcomplete([{ 
id: 'words', 
match: /(^|\b)(\w{2,})$/, 
search: function (term, callback) { 
    var words = ['google', 'facebook', 'linkedin']; 
    callback($.map(words, function (word) { 
     return word.indexOf(term) === 0 ? word : null; 
    })); 
}, 
replace: function (word) { 
    return word + ' '; 
} 
}, 
    { 
    id: 'names', 
    mentions: ['peter','steven', 'jeffrey', 'paul'], 
    match: /\B@(\w*)$/, 
    search: function (term, callback) { 
     callback($.map(this.mentions, function (mention) { 
      return mention.indexOf(term) === 0 ? mention : null; 
     })); 
    }, 
    index: 1, 
    replace: function (mention) { 
     return '@' + mention + ' '; 
    } 
}, 
{ 
    id: 'tasks', 
    tasks: ['invoice','call', 'email', 'put on hold'], 
    match: /\B#(\w*)$/, 
    search: function (term, callback) { 
     callback($.map(this.tasks, function (task) { 
      return task.indexOf(term) === 0 ? task : null; 
     })); 
    }, 
    index: 1, 
    replace: function (task) { 
     return '#' + task + ' '; 
    } 
} 
         ]); 

prüfen http://codepen.io/jmdejongh/pen/EyKQrZ