0

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?

  • Maybe this helps you a little bit: github.com/devbridge/jQuery-Autocomplete – fruppel Mar 24 '16 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 '16 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 '16 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 '16 at 13:44
0

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>'
            }
        });

    });
");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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