javascript - Cakephp 3.0 自动完成 jquery ui

Question

我需要知道为什么以下代码不起作用。此代码将从索引 Controller 中提取数据以搜索获取 json 数据。既不会发出任何请求，也不会发生任何情况

我是 Cakephp 3.0 的新手

我正在尝试在 CakePHP 3.0 中使用自动完成/自动建议功能，但我发现的所有内容要么适用于 1.3，要么根本不适用于 Cake，而且我不知道该怎么做才能使其正常工作。我正是需要它对于 cakephp 3.0 片段 1.CarsController.php 这是carscontroller在ajax请求时访问的内容，并将编码为json数据 2.CarsTable.php 从 carstable 获取数据 3.index.ctp 是查看页面和自动完成方法

<?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

此代码片段适用于 cakephp 3.0 中的自动完成

查看搜索\Template\post\ 搜索.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>

在您的 Controller 中添加此功能。正确更改数据库和其他变量。 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);              
}}

在routes.php中添加这一行

路由器::扩展('json', 'xml');