Autocompletion – the easy way

Nate has published a nice component which makes the creation of an input field with Ajax autocompletion very easy. In fact, it is (almost) as easy as creating a simple input field.

What do you have to do? Put the component to your app/controllers/components directory. In your controller you have to include the component with:

var $components = array('Autocomplete');

Also make sure that you have defined the Ajax helper in your controller. I usually add it to the helpers array in my AppController (app/app_controller.php):

var $helpers = array('Html', 'Javascript', 'Ajax');

After that, you can add the autocompleter to your view.

<?php echo $ajax->autocomplete('Company/name'); ?>

One condition must be fullfilled to make this code snippet work: the controller which renders the view must have access to the appropriate model, in our example to the Company model.

That’s it :)

Thanks to Nate for the hint.

11 Comments

  1. jf
    Posted June 9, 2006 at 11:00 pm | Permalink

    Moi j’obtiens l’erreur suivante :

    Erreur : Ajax.Autocompleter is not a constructor
    Fichier source : http://localhost/cake/index.php/types/
    Ligne : 60

    Ma ligne 60 :

    new Ajax.Autocompleter(‘Type_name’, ‘Type_name_autoComplete’, ‘/cake/index.php//types/’, {asynchronous:true, evalScripts:true});

    D’ou pourrait vernir le problème ?

    Merci

  2. Posted June 10, 2006 at 10:10 am | Permalink

    @jf: Hm, I have no idea what could be the problem. My code looks almost identical…

    I am sorry, but maybe you will have more luck in the CakePHP google group: http://groups.google.com/group/cake-php

  3. jf
    Posted June 16, 2006 at 9:56 pm | Permalink

    Solution :
    You have to include the prototype and script.aculo.us libraries in the
    header of your page.

  4. new cake
    Posted July 1, 2006 at 9:00 pm | Permalink

    how can I give access of one model to another for this script.

  5. Posted July 3, 2006 at 7:53 am | Permalink

    @new cake: Sorry, I don’t understand what you try to accomplish.

  6. Ritesh Agrawal
    Posted July 20, 2006 at 2:48 pm | Permalink

    hi,

    I am trying to use the autocomplete component but not sure where I am making a mistake

    ==== Here is my controller that access author model ====

    ===== This is the view /view/authors/auto.thtml
    link(‘prototype/prototype’);
    echo $javascript->link(‘scriptaculous/scriptaculous’);
    ?>

    Last Name
    autocomplete(‘Author/last_name’); ?>
    submit(‘View Post’)?>

    ==== Here is the generated form

    Last Name

    new Ajax.Autocompleter(‘AuthorLastName’, ‘AuthorLastName_autoComplete’, ‘/cake/authors/auto’, {});

  7. Ritesh Agrawal
    Posted July 20, 2006 at 2:51 pm | Permalink

    hi,

    I am trying to use the autocomplete component but not sure where I am making a mistake

    ==== Here is my controller that access author model ====
    class AuthorsController extends AppController
    {
    var $name = ‘Authors’;
    var $scaffold;

    var $components = array(‘Autocomplete’);
    var $helpers = array(‘Html’, ‘Javascript’, ‘Ajax’);

    function auto(){

    }

    }//endofclass

    ===== This is the view /view/authors/auto.thtml

    php echo $javascript->link(‘prototype/prototype’);
    php echo $javascript->link(‘scriptaculous/scriptaculous’);

    form action=”/authors/auto” method=”POST”
    Last Name:
    php echo $ajax->autocomplete(‘Author/last_name’);
    php echo $html->submit(‘View Post’)

    ==== Here is the generated form
    form action=”/authors/auto” method=”POST”
    label>Last Name

    div id=”AuthorLastName_autoComplete” class=”auto_complete” /> new Ajax.Autocompleter(‘AuthorLastName’, ‘AuthorLastName_autoComplete’, ‘/cake/authors/auto’, {});

  8. Posted July 20, 2006 at 5:55 pm | Permalink

    @Ritesh Agrawal: Hm, there was a bug in the latest release of CakePHP, so maybe that is the cause for the problem. See https://trac.cakephp.org/ticket/1154 . If that does not fix the problem, please post the code in the google group (it is easier than posting code here *g*).

  9. nickr
    Posted July 27, 2006 at 12:16 am | Permalink

    For me, what made the difference was adding in a link to the controls.js file, so that my app\views\layout\default.html included these four lines:

    charset(‘UTF-8’) ?>
    link(‘prototype’) ?>
    link(‘controls’) ?>
    link(‘scriptaculous.js?load=effects’) ?>

    Refreshed the page and it all worked perfectly. I just need a little CSS to power the dropdown, and I’ll be set! Thanks!

  10. nickr
    Posted July 27, 2006 at 12:19 am | Permalink

    Oops. Am hoping I can use code tags. The four lines should be:

    charset('UTF-8') ?>
    link('prototype') ?>
    link('controls') ?>
    link('scriptaculous.js?load=effects') ?>
    
  11. Jefferson Wellington da Cunha
    Posted August 7, 2006 at 6:56 am | Permalink

    How I do to access all attributtes of other model for I to use your component autocompleting a attribute that not yourself.

    Example:
    Model A, hasMany B
    Model B, belongsTo A (Table b have a_id attribute)

    I need autocomplete a attribute different of ‘a_id’ at Controller of Model B.

    How I do?

    So Thanks,
    JWCunha


%d bloggers like this: