HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
@username script
422
MVP
Not all mine, in fact very little is my code. But for anyone that wants to have a play, this may be a step in the right direction to integrating @autocomplete
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> < HTML> < HEAD> < TITLE> @mention autocomplete - 422 < /TITLE> < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">< /script> < link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css" /> < script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.min.js">< /script> < script type="text/javascript"> $(document).ready(function(){ var availableTags = [ "422", "Todd", "Lincoln", "Underdog", "Sahotataran", "jspautsch", "Clethrill", "Tim", "candyman", "x00", "ddumont" ]; function split(val) { return val.split(/@\s*/); } function extractLast(term) { return split(term).pop(); } $("#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); } else { results = ['Start typing...']; } } 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; } }); }); < /script> < style> #tags, p { margin: 10px; width: 200px; } #result { margin: -10px 10px; line-height: 1.3em; width: 203px; } #result li { padding-left: 10px; } .active { background: #CCC; color:#FFF; font-weight: bold; } < /style> < /HEAD> < BODY> < div id="container"> Type @ char to textarea... < textarea id="tags">< /textarea> < div id="result">< /div> < /div> < /BODY> < /HTML>
Please note I have added a space after all < to render in here
There was an error rendering this rich post.
Tagged:
1
Comments
Have yourself an extra eggnogg, this is amazing.
The "availableTags" should come from an URL, but this is a really nice example.
I know why you made that little array. Just to make it work, right?
Also, the links to jquery locations and css styles could use some work ;-)
There was an error rendering this rich post.
Sure. thanks Mate.
p.s sent you that Zip via Facebook
There was an error rendering this rich post.
How about using input-tokens for jquery. -the one that is used while we tag a discussion
There was an error rendering this rich post.
that's what i was thinking too.
Vanilla Wiki, Tastes Great! 31,000 viewers can't be wrong. || Plugin Development Explained
Yup that will be handy returning token from a function in form userid => username.
So easy just a need of additional function and other JavaScript etc is already included
There was an error rendering this rich post.
I think the idea is that you mention someone within a textarea whereas the tagging tokens are for a textarea with nothing but tags.