Question

Is there a good solution to create textfield inputs like those of Facebook or Google+ status updates and posts where a tokenizing autocomplete is allowed to happen after certain trigger keys like “@” or “+”?

It seems like there are a couple of good tokenizing autocomplete plugins but I’m trying to find a way to call the autocomplete only when the key is present before a term but let’s the user type plain non-autocompleted text otherwise.

It seems like you might be able to hack something together with bind but I’m pretty new to JavaScript so if there is a simple more elegant solution I’d love to hear it.

Answer 1

Using jquery is not very difficult. First set a class to identify your input boxes. For example:

<input type="text" class="autocomplete" name="the_name" />

Then, you can simply capture the keyup event and check for the key you need. For example, @ symbol has the keycode 64

$(".autocomplete").keypress(function(e) {
    if (e.which == 64) {
        // your event handler
    }
});

You can see all event codes and more info about .keypress() here.

Your event handler may use the jquery.ajax function to ask the server for the data to fill your selector.

If you want to autocomplete after entering some text, for example if the user writes “@tyle” you have to modify the condition in the above code, to get the last word written and check if it has an @ at the beginning.