CakePHP 2.X 的自动完成字段答案

【问题标题】：Autocomplete field with CakePHP 2.XCakePHP 2.X 的自动完成字段
【发布时间】：2013-07-05 15:33:24
【问题描述】：

我正在尝试使用 cakephp 2.3.7 创建一个自动完成文件。有很多教程，但大多数都是针对 cake 1.3 左右的。

我找到了一些类似这个 (http://hitechcyberabad.blogspot.com.es/2013/02/autocomplete-in-cakephp-22x-using-jquery.html) 的蛋糕 2.X，但它们都不适合我。

我不得不编辑教程的cities_dropdown.ctp代码：

<div class="contacts search form">
<fieldset>
<legend></legend>
    <?php //paginator->options(array('url' => $this->passedArgs));
    $this->Form->create('Contact', array('type'=>'post','action' => 'find'));

    echo $this->Form->input('city', array(
        'empty' => 'Pick a city',
        'label' => 'City',
        'option'=> $cities,
        'id' => 'city',
        'autocomplete' => 'on'));
    echo $this->Form->end(__('Search'));
    ?>
   </fieldset>

</div>
<script>
$( "#city" ).autocomplete({
  source: "/cake/contacts/find",
  minLength: 2,
  delay: 2
});
</script>

其余代码与教程相同。

我没有收到任何错误消息，它根本不起作用，我不知道为什么。

【问题讨论】：

source: "/cake/contacts/find" 如果不能以autocomplete expects 的格式返回数据 - 它将无法正常工作。
我也试过完整的路线，但还是不行
不知道这意味着什么，您没有提供任何信息。例如url /cake/contacts/find?term=abc 返回什么 - 当您输入自动完成表单输入时，您甚至发出请求吗？

标签： php jquery cakephp autocomplete

【解决方案1】：

简单的自动完成代码

cities.ctp 代码

<? echo $this->Html->css('jquery-ui');
   echo $this->Html->script('jquery-1.10.2');
   echo $this->Html->script('jquery-ui');
   echo $this->Html->css('style.css');
 ?>
 <script>
  $(function() {
    var availableTags = [<?=$cities?>];
    $( "#city_from" ).autocomplete({
      source: availableTags
    });
  });
  </script>

<?php echo $this->Form->input("city_from", array('required'=>'true',  'class'=>'form-control', 'id'=>'city_from', 'placeholder'=>'City or airport', 'label'=>'<span class="opensans size13">Flying from</span>'));?>

控制器代码

       //Airport cities string section starts
        $this->loadModel('AirportCity');
        $cities=$this->AirportCity->find('list',array('fields'=>'AirportCity.city_name'));
        $strCities='"'.implode('","',$cities).'"';
        $this->set('cities',$strCities);
        //Airport cities string section ends

如需更多帮助，请参阅http://jqueryui.com/autocomplete/

【讨论】：

【解决方案2】：

您是否调试过 ajax 调用的响应？使用 chrome 或 Firebug for Firefox 的调试工具来调试请求或使用http://www.charlesproxy.com/ 进行调试。

我很确定您的 json 响应不正确并且可能包含错误。此外，您链接的教程没有显示在 CakePHP 中处理 json 的最佳方法，请参阅手册的this page。调试您的回复并用它更新您的问题。

【讨论】：

我刚刚意识到我没有收到任何 AJAX 调用，因为它会抛出下一条错误消息：ReferenceError: $ is not defined $("#city").autocomplete({
好吧，你去吧：修复 javascript。在这种情况下，看起来 jquery 根本没有加载或在您尝试访问 $ 时加载。
我按照教程说的那样加载了，在 default.ctp 中添加了 "$this->Html->script(...)" 行无论如何，我已经再次加载它然后我有了这个错误：TypeError: $(...).autocomplete is not a function $("#city").autocomplete({
该教程显然不是最好的教程之一。将您的脚本包装在 $(document).ready(function() { // 调用 .ready() 的处理程序。});或更好地使用 $this->Html->scriptBlock("...", array('inline' => false); 还要确保 jquery lib 已加载 BEFORE 您的代码。
我无法让它工作，但我找到了另一个教程，我终于明白了 (bakery.cakephp.org/articles/matt_1/2011/08/07/…)。