Autocompletion – the easy way

Published on and tagged with ajax  cakephp  component

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. You can get the component from http://github.com/cakebaker/autocomplete-component (the original component from Nate is available on CakeForge, though it no longer works with current CakePHP versions).

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

Please notice that the Ajax helper requires the Prototype and Scriptaculous Javascript libraries (they are placed in app/webroot/js). They are typically loaded in the “head” section of your layout with:

<?php
echo $javascript->link('prototype');
echo $javascript->link('scriptaculous');
?>

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.

Update 2010-03-08: Added a paragraph about the requirement of the Prototype and Scriptaculous libraries. Thanks to Andy Potanin for the hint.

107 comments baked

  • cakebaker

    @taqman: Hm, what versions of CakePHP, Prototype and Scriptaculous do you use?

  • Rameena Asheer

    Thank you very much for a wonderful autocomplete.
    It works successfully in my application.

    If I want to enter a minimum number of characters before the autocomplete starts,
    like minChars in http://book.cakephp.org/es/compare/632/autoComplete.

    What is the solution??

  • cakebaker

    @Rameena: Thanks for your comment!

    You should be able to use it as it is described in the article you linked:

    echo $ajax->autocomplete('Company.name', '', array('minChars' => 3));
    

    Hope this helps!

  • Rameena Asheer

    Really thanks for your very sooooon reply.

    I want to know about how to validate these fields.

  • cakebaker

    @Rameena: If you want to validate data on the server-side check out the chapter Data Validation in the cook book.

    For client-side validation you either have to write your own validation code or use something like validation-js or LiveValidation.

    Hope this helps!

  • ena

    sir, i would like to ask, its working on me now, but every time I search for a character, buncg of cake php queries are also appearing.

  • cakebaker

    @ena: Sounds like “debug” is set to 2. If you set it to either 1 or 0, the queries should disappear. You can set the “debug” in app/config/core.php or with Configure::write(‘debug’, 0); in your controller.

    Hope this helps!

Bake a comment




(for code please use <code>...</code> [no escaping necessary])

© daniel hofstetter. Licensed under a Creative Commons License