Cakephp 3.0 autocomplete jquery ui

Question

I need to know why the following isnt working .This code will extract data from index controller to search get json data.Neither does any request is made and nothing happens

I'm new to both Cakephp 3.0

I'm trying to get an autocomplete / autosuggest working in CakePHP 3.0 but everything I find is either for 1.3 or not for Cake at all and I don't know what to do to get it working properly.I precisely need it for cakephp 3.0 snippet 1.CarsController.php This is carscontroller accesses when an ajax request and will encode in json data 2.CarsTable.php fetches data from the carstable 3.index.ctp is the view page and autocomplete method

<?php
namespace App\Controller;

use App\Controller\AppController;

  class CarsController extends AppController {    

    public function index() {
       $this->loadComponent('RequestHandler'); 
      if ($this->request->is('ajax')) {
        $term = $this->request->query('term');
        $carNames = $this->Car->getCarNames($term);
        $this->set(compact('carNames'));
        $this->set('_serialize', 'carNames');
      }
    }
  }
  ?>

<?php
namespace App\Model\Table;

use Cake\ORM\Table;


  class Carstable extends AppModel {

    public function getCarNames ($term = null) {
      if(!empty($term)) {
        $cars = $this->find('list', array(
          'conditions' => array(
            'name LIKE' => trim($term) . '%'
          )
        ));
        return $cars;
      }
      return false;
    }
  }
  ?>

<?php
  //let's load jquery libs from google
  $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array('inline' => false));
  $this->Html->script('https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array('inline' => false));

  //load file for this view to work on 'autocomplete' field
  

  //form with autocomplete class field
  echo $this->Form->create();
  echo $this->Form->input('name', array('class' => 'ui-autocomplete',
               'id' => 'autocomplete'));
  echo $this->Form->end();
  ?>


  <script type="text/javascript">
(function($) {
  $('#autocomplete').autocomplete({
        source: "<?php (array('controller'=>'Cars','action'=>'search')); ?>",
        datatype:"json",
        minLength: 1
  })
})
  </script>

Answer 1

This code snippet will work for autocomplete in cakephp 3.0

View for search \Template\post\ Search.ctp

<?php
use Cake\Routing\Router;
use Cake\View\Helper\UrlHelper;

?><div class="ui-widget">
<?php
        echo $this->Form->create('Posts', array('action' => 'search'));
        echo $this->Form->input('name',array('id' => 'Autocomplete')); 
       
        echo $this->Form->end();
    ?></div><div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript">
      $(document).ready(function($){
    $('#Autocomplete').autocomplete({
  source:'<?php echo Router::url(array("controller" => "posts", "action" => "search")); ?>',
  minLength: 1
    });  });
</script>

In your controller add this function .Change database and other variable properly. src\Controller\PostController.php

 public function search() 
       {
        if ($this->request->is('ajax')) {
            
            $this->autoRender = false;            
            $name = $this->request->query('term');            
            $results = $this->Posts->find('all', array(
                                           'conditions' => array('Posts.title LIKE ' => '%' . $name . '%')
                                         
                                           ));
            
            $resultArr = array();
            foreach($results as $result) {
               $resultArr[] = array('label' =>$result['title'] , 'value' => $result['title'] );
            }
            echo json_encode($resultArr);              
}}

In routes.php add this line

Router::extensions('json', 'xml');