Learn how to install and use the SilvarCode/Autocomplete plugin on a CakePHP powered website / app

Step 1: Installation

The first step is to install the plugin into your cakephp website. You can do that using composer, https://getcomposer.org. Bring up a terminal window, change directory to the directory where you installed your cakephp app/site, then issue the following command, composer require silvarcode/autocomplete, to install the plugin. Once that is complete, you need to load the plugin into your application, to do that you issue this command, bin/cake plugin load SilvarCode/Autocomplete, the autocomplete plugin is now available in your application. 

You now need to copy the asset files (css and javascript) from the plugin's webroot into the webroot of your application. You can either do that manually or you can use the CopyAssetsCommand provided with the plugin. You can issue the following command from the terminal, bin/cake bake copy-autocomplete-assets --help, to see the instructions. To copy the files all you have to do is to issue the command confirming that the files should be copied: bin/cake bake copy-autocomplete-assets --confirm yes.

Unless you issue the --confirm yes command, the files will not be copied.

Great, once that is done the autocomplete plugin is fully installed and is available to use.

If you wish to install the plugin manually, see the the code on github.

Step 2 - Setting up

For any controller in your application which you would like to provide autocomplete functionality, add the AutocompleteTrait to your controller and the Autocomplete helper to the view. By way of example you can do that as follows:

<?php
declare(strict_types=1);

namespace App\Controller;

use App\Controller\AppController;
use SilvarCode\Autocomplete\Controller\AutocompleteTrait;

class CategoriesController extends AppController
{
  use AutocompleteTrait;
  public function beforeFilter(\Cake\Event\EventInterface $event)
  {
    parent::beforeFilter($event);
    $this->viewBuilder()->addHelper(
      'SilvarCode/Autocomplete.Autocomplete'
    );
    /**
     * What you can also do:
     * $this->setAutocompleteTable('Categories');
     * $this->setAutocompleteSelectFields([]);
     * Instead of using the AutocompleteTrait,
     * you can also define your own autocomplete function.
     * For the view, create: templates/Categories/autocomplete.php
     * and add the following inside: 
     * <?= $this->element('SilvarCode/Autocomplete.autocomplete') ?>
     */
  }
}

Step 3 - Creating autocomplete control

Before you create the autocomplete control using the Form helper provided by CakePHP, you need to make sure that you have created the autocomplete

template inside the view for the controller containing only the following line of code:

<?= $this->element('SilvarCode/Autocomplete.autocomplete') ?>

If you do not want to use the autocomplete element provided by the plugin, you can, of course, write your own code.

For the purpose of this, we are creating a product which belongsToMany categories.

<?= $this->Form->create($product, []) ?>
<?= $this->Autocomplete->autocomplete('categories._ids', ['class' => 'form-control outline-none']) ?>
<?= $this->Form->end() ?>

We wrote this blog post in a little hurry, and will come back to it later to provide additional details.

If you require any assistance, let us know as we may be able to help. You can certainly hire us.