3

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

        <field
            name="studio_id"
            type="text"
            label="COM_MYCOMPONENT_STUDIO_LABEL"
            description="COM_MYCOMPONENTSTUDIO_DESC"
            size="100"
            class="span5"
            default=""
            />

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({

minLenght:0,

source: function( request, response ) {
                  $.ajax({
                    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 ) {

    $("#jform_studio_id").val(ui.item.studio_id);
},

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

mycomponent.php

<?php
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 Mar 28 '15 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 Mar 28 '15 at 10:14
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 Mar 28 '15 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...) – Ville Niemi Mar 28 '15 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 Mar 28 '15 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 Apr 15 '15 at 2:04
1

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

Replace

JpanimesController

With

{your_component_name}Controller{controller_name}

and

Replace

index.php?format=raw&option=com_mycomponent&task=testing

With

index.php?format=raw&option=com_mycomponent&task={your_full_controller_name}.testing

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

jQuery( "#agents" ).autocomplete({
            source: function (request, response){
                bd.jQuery.ajax(
                    {
                        url:"index.php?option=com_jestate&view=company&task=company.getUserAgentList&tmpl=component",
                        data:
                        {
                            query: request.term
                        },
                        success: function(data)
                        {
                            todisplay = [];
                            data = jQuery.parseJSON(data);
                            bd.jQuery(data).each(function(key,val){
                               insert = '{"label":"'+val.username+'","value":"'+val.username+'","user_id":"'+val.id+'"}';
                               todisplay.push(JSON.parse(insert));
                            });
                            response(todisplay);
                        }
                    });
            },
            select:function(event,ui){
                if(bd.jQuery('#'+ui.item.user_id).length != 0){
                    alert('Agent Already Added');
                }else{
                    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>';
                    bd.jQuery('#agentList').append(detail);
                    bd.jQuery('.removeAgent').on('click',function(e){
                        e.preventDefault();
                        bd.jQuery(this).parent().remove();
                    });
                    bd.jQuery(this).val('');
                    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 Mar 30 '15 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. – subashbasnet8 Mar 30 '15 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 Mar 30 '15 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 – subashbasnet8 Mar 30 '15 at 12:10
  • if your file name is ajax.php then rename controller as MycomponentControllerAjax and call function as task=ajax.testing – subashbasnet8 Mar 30 '15 at 12:13

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.