JQuery Facebook like AutoSuggest triggered by "@"

Question

I'm looking for a JQuery (or other framework) plugin, kind of working like the Facebook status message text box.

What it should do:

• Allow text to be typed freely without triggering the AutoSuggest (as opposed to normal AutoSuggest boxes)

• Show the AutoSuggest, when triggered by a certain character, such as '@'.

Actually, it should work exactly like the one in FaceBook ... :)

Answer 1

I would use something like this: http://www.codeproject.com/KB/aspnet/Search_SuggestTextBox.aspx

The good thing about this library is that it is triggered by the text input's onkeyup. This means you can alter their provided JS function to check for the correct key sequence

Maybe something like this:

var shiftDown=false; //Track if SHIFT was the last key pressed.

function searchSuggest(e) 
{
    var key = window.event ? e.keyCode : e.which;

    if (key==40 || key==38)
    {
        shiftDown=false;
        scrolldiv(key); 
    }
    else if (key == 16) // SHIFT WAS PRESSED
    {
        shiftDown=true;
    }
    else if (key == 50 && shiftDown) // 2 WAS PRESSED
    {
        if (searchReq.readyState == 4 || searchReq.readyState == 0) 
        {
            var str = escape(document.getElementById('txtSearch').value);
            strOriginal=str;
            searchReq.open("GET", 'Result.aspx?search=' + str, true);  
            searchReq.onreadystatechange = handleSearchSuggest;
            searchReq.send(null);
            shiftDown=false; 
        }
    }  
    else 
    {   
        shiftDown=false; 
    }  
}

Answer 2

Hopefully by now you (OP) have been able to utilize Dutchie432's answer to create a solution that you are content with. But if you, or anyone else who happens to stumble upon this, haven't, or have and are perhaps are looking for a robust, ready-to-use solution...

...It looks like Mentionator is exactly what you're looking for: it is a jQuery plug-in which enables clients to create highlighted references to ("mentions") to predefined entities in text areas. It is mantained by this guy right here :) .

Unlike similar plug-ins, Mentionator provides the following options which provides options which, as you requested, enable it to function exactly like Facebook's tagging facility:

doesRecognizeDelimitedSubstrings: 
    A boolean which, if defined as true, will allow the external value
    of a mention, herein called "mentionExternalValue", to sustain
    modifications so long as the result of each such modification 
    is in mentionExternalValue.split(delimValue)

delimValue: 
    A string, or regular expression representing the set of strings,
    that, given doesRecognizeDelimitedSubstrings === true, delimit
    mentionExternalValue substrings that can also serve as external
    value of the mention if yielded by a modification of
    mentionExternalValue