I'm completely lost at creating a autocomplete function for a form field. Even thought the thing I want is pretty simple:

I created a form for the backend. Now I have a text field which I basically want to be autocompleted with data from a table of my database.

In my form.xml the field looks just like this


For this purpose I took a code I've already used for autocomplete function and there it worked perfect. This is the JQuery code

$( "#jform_studio_id" ).autocomplete({


source: function( request, response ) {
                    url : 'index.php?format=raw&option=com_mycomponent&task=testing',
                    dataType: "raw",
                    type: "POST",
                    data: {search: request.term,},

                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.studio_name,
                                studio_id: item.studio_id

select: function( event, ui ) {


messages: {
    noResults: '',
    results: function() {}

open: function() { 
    $("ul.ui-menu").width( $(this).innerWidth() );

As far as I've read, for this case I would have to create a method in the main entry file of my component


defined('_JEXEC') or die('Restricted access');

class MyComponentControllerAjax extends JControllerLegacy
    protected $default_view = 'mycomponent';

    public function testing() {

        $studios[] = array('studio_id' => '1', 'studio_name' => 'studio');

        echo json_encode($studios);

Like I said I'm completely lost. I've tried several different things. Searched for solutions several hours but I couldn't find something that solved my problem. I hope someone can give me a shove into the right direction.

  • 1
    So what exactly does not work? Does the testing method not get called or what kind of troubles are you experiencing?
    – elk
    Commented Mar 28, 2015 at 3:33
  • First of all when I enter something in the field, in the console it tells me TypeError: $ is not a function And about the rest I'm just not sure if the way I think it works is correctly: Calling the task in the url triggers the method? How am I then supposed to connect it with a model?
    – Taiga
    Commented Mar 28, 2015 at 10:14

2 Answers 2


Use jQuery() instead of $(). The Joomla administrator uses jQuery in no conflict mode.

  • Tanks for your answer. I'm not sure if I understand you correctly. Are you talking about the $() at the beginning of the JQuery code? I replaced $() with jQuery() but now I get the error TypeError: jQuery(...).autocomplete is not a function
    – Taiga
    Commented Mar 28, 2015 at 13:17
  • @Taiga I think autocomplete is part of jQuery UI. You need to load that if you want to use it. docs.joomla.org/J3.x:Javascript_Frameworks#jQuery_UI_Framework (NOTE the part about "As of Joomla 3.0.2...) Commented Mar 28, 2015 at 13:22
  • Thanks for this tip! I thought the JQuery file already included in the standard backend template contains all functions.. I now downloaded a custom JQuery file and included it into my component. The network analysis function in Firefox now shows me that the Ajax requestion is going out and I'm also receiving the results of the json encoded array. But now I have no clue how to get results from the database following the Joomla! MVC standards
    – Taiga
    Commented Mar 28, 2015 at 13:43
  • well you could access the database from the controller, but you could also just call the model I guess ( $model = $this->getModel('<yourmodelname>'); )
    – elk
    Commented Apr 15, 2015 at 2:04

I think your url is not pointing correctly. First thing your controller name is not clear here.










Update:- Here is the code i successfully implemented a months earlier, here bd.jQuery == jQuery == $

jQuery( "#agents" ).autocomplete({
            source: function (request, response){
                            query: request.term
                        success: function(data)
                            todisplay = [];
                            data = jQuery.parseJSON(data);
                               insert = '{"label":"'+val.username+'","value":"'+val.username+'","user_id":"'+val.id+'"}';
                if(bd.jQuery('#'+ui.item.user_id).length != 0){
                    alert('Agent Already Added');
                    detail =  '<div id="'+ui.item.user_id+'">';
                    detail +=  '<span>'+ui.item.value+'</span>';
                    detail +=  '<input type="hidden" value="'+ui.item.user_id+'" name="agentSelected[]"/>';
                    detail += '<a href="#" class="removeAgent"> Remove</a>';
                    detail +=  '</div>';
                    return false;
  • Thanks for your answer. I already tried this url, but I couldn't bring it to work. When doing task={controller_name}.{task} does it search for the controller with this name and then call the method given after the dot? Do I then also need a view? Because it wouldn't do much as I only need data from the model
    – Taiga
    Commented Mar 30, 2015 at 12:04
  • you don't need a view. Could you clearly mention your controller file name where your function resides. Coz if you are trying with your above config it will obviously fails. Commented Mar 30, 2015 at 12:07
  • I will name the controller file ajax.php I want the controller to be used for all my ajax requests for my form as I'll have a few of them to be handled.
    – Taiga
    Commented Mar 30, 2015 at 12:08
  • suppose your controller name is ajaxcontroller and component name is com_test then inside controller folder of your component create ajaxcontroller.php and create controller name TestcontrollerAjaxcontroller which extends JcontrollerLegacy and inside that controller create a function you want to call... then in utl call like this :- &option=com_test&task=ajaxcontroller.function_name Commented Mar 30, 2015 at 12:10
  • if your file name is ajax.php then rename controller as MycomponentControllerAjax and call function as task=ajax.testing Commented Mar 30, 2015 at 12:13

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.