Question

While typing into a textarea, I’d like certain character combinations to trigger an inline, popup “select box”, just like in Facebook when you tag your friends in posts/comments.

For example, if the user were to type [friend:m they’d get a popup, with a list of their friends that start with m. As they continued typing, they’d get more narrow results… just like auto-complete.

I’d like to have other triggers too… [place: or [info: , etc…

I’ve been able to get up to where I can detect the triggers, but not experienced enough with Js/jQuery to finish this off. ;(

Here’s what I’ve got:

var totalcount=0;

$('#Data').keyup(function (){
    var arr = $(this).val().split(" ");
    var matchitems = count('[place:', arr);

    if(matchitems > totalcount) {
        $('#Data').val($('#Data').val()+'foobar');
        totalcount = matchitems;
    }
    if(matchitems < totalcount) {
        totalcount = matchitems;
    }
});

function count(value, array) {
    var j=0;
    for(var i=0; i < array.length; i++) {
        if(array[i] == "[place:") {
            j++;
        }
    }
    return j;
}

This works, when I type [place: it appends “foobar” to textarea. Now I’m trying to take it further; to read the trigger, and then do a JSON call to create the popup list. How do I go about doing this? Know of any tutorials out there that cover this? Thanks!

Answer 1

Here’s an example of the behavior you’re looking for

example jsfiddle

I’ve actually done something similar, I modified it to fit what you’re trying to do.

• It looks for a matching [type: where type is friend, place, info etc
• Loads the results
• Handles up/down keys to toggle between results, enter to select (or mouse click), esc hides the auto complete results
• Sets the input value based on selection made from auto complete