Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter
Support for Vanilla Forums Cloud product

In this Discussion

Follow Us


@username script

422422 Developer MVP
edited December 2011 in Developers

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

422 Real Estate Australia , now open Check it out

candyman

Comments

Sign In or Register to comment.