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 . ";

            lookup: users,
            lookupLimit: 5,
            delimiter: ' '


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?

  • Maybe this helps you a little bit: github.com/devbridge/jQuery-Autocomplete
    – fruppel
    Mar 24, 2016 at 13:27
  • I would probably try something with onSearchStart, because this is called before the AJAX request. Maybe there is a way to transform the search query from @Lod to Lod before it fires.
    – fruppel
    Mar 24, 2016 at 13:29
  • I'm probably over simplifying things, but couldn't you just add @ to each of the usernames before using json_encode? stackoverflow.com/a/28115783/691053
    – TryHarder
    Mar 28, 2016 at 13:24
  • I ended up using a different jQuery plugin (mention.js and typeahead.js). I've post the full answer later on
    – Lodder
    Mar 28, 2016 at 13:44

1 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);

    jQuery(document).ready(function($) {

        var users = " . $users . ";

            delimiter: '@',
            users: users,
            typeaheadOpts: {
                menu: '<ul class=\"myclass typeahead\"></ul>'


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.