@username script

422

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

UnderDog

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 ;-)

422

Sure. thanks Mate.

p.s sent you that Zip via Facebook :)

sahotataran

How about using input-tokens for jquery. -the one that is used while we tag a discussion

hbf

sahotataran said: How about using input-tokens for jquery. -the one that is used while we tag a discussion

that's what i was thinking too.

sahotataran

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

Todd

I think the idea is that you mention someone within a textarea whereas the tagging tokens are for a textarea with nothing but tags.