Triggering Autocomplete with @

Question

I am mostly a backend developer. And very new to javascript. So pardon my dumb question, but is there a way to trigger autocomplete when the user types '@' in a textfield. Like how it does in twitter.

take a look at http://flipnotes.net/notes/note/6/ – suhailvs Jan 30 '15 at 04:50 — suhailvs, Jan 30 '15 at 04:50

score 3 · Answer 1 · edited Oct 11 '12 at 21:57

3

Take a look at onkeyup if you are using straight javascript. If you are using jQuery, try keyup.

From there, you can check to see if the user entered '@' and then make your auto-complete .

edited Oct 11 '12 at 21:57

nutsch

5,922
2
20
35

answered Oct 11 '12 at 21:49

MKS

352
3
8

I wish I could mark both as correct. The other post was posted earlier thats why I marked it correct. Thank you so much for your answer though :) – Jonathan Oct 12 '12 at 19:07

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

Got two answers for you:

I think this blog post has what you need: Triggered @mention Autocomplete like Facebook, Twitter and Google+
Github repo: https://github.com/Hawkers/triggeredAutocomplete
Also a similar question: Twitter-style autocomplete in textarea

edited May 23 '17 at 11:44

Community

1
1

answered Oct 11 '12 at 21:53

zengr

38,346
37
130
192

score 2 · Answer 3 · answered Sep 15 '13 at 14:09

You could easily do it with http://complete-ly.appspot.com

just override the function onTextChange like this:

function onTextChange(text) {

   if (text.lastIndexOf('@') == text.length-1) { // ends with...

       // set the options, possibly change the text...
   }
}

score 0 · Answer 4 · answered Sep 22 '13 at 22:00

I've created a Meteor package for this purpose. Meteor's data model allows for fast multi-rule searching with custom rendered lists. If you're not using Meteor for your web app, (I believe) you unfortunately won't find anything this awesome for autocompletion.

Autocompleting users with @, where online users are shown in green:

enter image description here

In the same line, autocompleting something else using ! with metadata and bootstrap icons:

enter image description here

Fork, pull, and improve:

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

Triggering Autocomplete with @

4 Answers4