Autocomplete widget in CakePHP 3.X

Question

I'm trying to implement a form for students to signup in my website with an autocomplete control for Schools. For this purpose, I went to the CakePHP 3.0 reference and found a tutorial to achieve this. My problem is that they don't explicitly say how to retrieve the data (in this case the array of school names) for the autocomplete and for that reason I can't make it work. Here's my code:

register.ctp

<h1>Registration</h1><br>
<?php echo $this->Form->create('User', array('action' => 'register', 'context' => ['validator' => 'registerValidator'], 'templates' => ['autocomplete' => '<input id="school" name="{{name}}"{{attrs}}>'])); ?>
<?php echo $this->Form->input('fname', array('label' => 'First Name *', 'required' => true, 'placeholder' => 'First Name')); ?>
<?php echo $this->Form->input('sname', array('label' => 'Last Name *', 'required' => true, 'placeholder' => 'Last Name')); ?>
<?php echo $this->Form->input('country', array('options' => array('Select...', 'India', 'USA', 'Canada'), 'placeholder' => 'Select')); ?>
<?php //echo $this->Form->input('school', array('label' => 'School *', 'options' => array('Select...', 'School A', 'School B', 'School C'))); ?>
<?php
$this->Form->addWidget(
        'autocomplete', ['Autocomplete', 'App\View\Widget\Autocomplete']
);
$options = array("Arena", "Bambu", "Canela", "Perlita");
//echo $this->Form->input('School', ['type' => 'autocomplete']);
echo $this->Form->input('search', ['type' => 'autocomplete', 'label' => 'School *', 'id' => 'school', 'required' => true, 'autocomplete' => 'off', 'placeholder' => 'School']);
//echo $this->Form->autocomplete('search', $options);
?>
<?php echo $this->Form->input('province_region', array('label' => 'Province/Region', 'placeholder' => 'Province/Region')); ?>
<?php echo $this->Form->input('city_town', array('label' => 'City/Town', 'placeholder' => 'City/Town')); ?>
<?php echo $this->Form->input('email', array('label' => 'E-mail *', 'required' => true, 'placeholder' => 'Email')); ?>
<?php echo $this->Form->input('birth_dt', ['type' => 'date', 'label' => 'Date of birth *', 'minYear' => date('Y') - 100, 'maxYear' => date('Y'), 'empty' => '-', 'default' => '', 'required' => true]);
?>

<?php echo $this->Form->input('password', array('label' => 'Password *', 'required' => true, 'placeholder' => 'Password')); ?>

<?php
echo $this->Form->input('pwd_repeat', array('label' => 'Confirm Password *', 'type' => 'password', 'required' => true, 'placeholder' => 'Repeat Password'));
echo $this->Form->submit('Send');
?>

Autocomplete.php

   namespace App\View\Widget;

   use Cake\View\Widget\WidgetInterface;
   use Cake\View\Form\ContextInterface;

   class Autocomplete implements WidgetInterface {

protected $_templates;

public function __construct($templates) {
    $this->_templates = $templates;
}



public function render(array $data, ContextInterface $context) {
    $data += [
        'name' => '',
    ];
    return $this->_templates->format('autocomplete', [
                'name' => $data['name'],
                'attrs' => $this->_templates->formatAttributes($data, ['name'])
    ]);
}

public function secureFields(array $data) {
    // return [];
    return [$data['name']];
}

}

?>

UsersController.php

<?php



namespace App\Controller;

use App\Controller\AppController;
use Cake\ORM\TableRegistry;
use Cake\Mailer\Email;
use Cake\Routing\Router;
use Cake\Event\Event;
use Cake\Validation\Validator;

class UsersController extends AppController {

public $helpers = [
    'Form' => [
        'widgets' => [
            'autocomplete' => ['App\View\Widget\Autocomplete']
        ]
    ]
];
....

And here's the output:

Any type of help will be extremely appreciated. Thanks in advance for helping.

Answer 1

autocomplete input will show you only your earlier typed values using the same browser.

The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.

Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.

Source: http://www.w3schools.com/tags/att_input_autocomplete.asp
You want to show suggestions like search engines show. For retriving data you need to use javascript.