jQuery autocomplete @mention

Question

I have a json encoded string which contains a couple of users:

$users = json_encode($helper->getAllUsers());

a textarea:

<textarea id="jj_message"></textarea>

and am using the jQuery autocomplete plugin that comes shipped with Joomla:

JHtml::_('script', 'media/jui/js/jquery.autocomplete.min.js');

$script = "
    jQuery(document).ready(function($) {

        var users = " . $users . ";

        $('#jj_message').autocomplete({
            lookup: users,
            lookupLimit: 5,
            delimiter: ' '
        });
    });
";

$doc->addScriptDeclaration($script);

Now in my textarea, if I start typing in a name, for example Lod, then the jQuery autocomplete will provide Lodder as the result.

However, what I'd like to do is initiate the autocomplete when a user types in a name with the @ symnbol at the beginning, for example, @Lod.

Currently when I do this, no results are displayed.

Have anyone ever achieved this with Joomla's built in autocomplete plugin?

Answer 1

Will just post this as a reference.

I ended up using a jQuery plugin called Mention.js which utilises a standalone version of Bootstrap's Typeahead plugin.

The code I then wrote which is just a Beta concept is:

$users = json_encode($helper->getAllUsers());

JHtml::_('script', 'mod_mymodule/mention.min.js', false, true);
JHtml::_('script', 'mod_mymodule/typeahead.min.js', false, true);

$doc->addScriptDeclaration("
    jQuery(document).ready(function($) {

        var users = " . $users . ";

        $('#element').mention({
            delimiter: '@',
            users: users,
            typeaheadOpts: {
                menu: '<ul class=\"myclass typeahead\"></ul>'
            }
        });

    });
");