带有自动完成功能的 Cakephp 表单输入答案

【问题标题】：Cakephp form input with autocomplete带有自动完成功能的 Cakephp 表单输入
【发布时间】：2013-11-14 04:14:44
【问题描述】：

我正在使用 CakePhp 2.2.1，我在实现我刚才在标题中提出的问题时遇到了一些问题，我找到了几个教程，但其中大部分是针对 cakephp 1.3 的，其他的不是我想做的。我有一个包含“player_id”的“事件”表，因此一个玩家有很多事件，一个事件属于一个玩家。

在我的事件添加表单中，我按照食谱中的说明进行操作，我会得到一个可供选择的玩家下拉列表，但我想要的只是写下玩家的姓名并从自动完成结果中选择我想要的那个。这些球员也必须来自我之前选择的球队。有什么想法吗？

提前致谢。

【问题讨论】：

我在我的一个项目中使用了 jquery 自动完成功能：api.jqueryui.com/autocomplete

标签： php jquery cakephp

【解决方案1】：

特别感谢 Andrew 指出这一点 api.jqueryui.com/autocomplete。但是，没有使用此指南的真正指南。所以我找到了这个post，它解释了 Abhishek 的第二个链接所说的内容，但我可以更好地理解它。因此，如果有人感兴趣，这是我的解决方案：

1 - 从自动完成页面下载您需要的 .js。保存在 app/webroot/js 中

2 - 在您的 app/View/Layouts/default.ctp 或您要使用自动完成添加的视图中：

echo $this->Html->script('jquery-1.9.1.js'); 
echo $this->Html->script('jquery-ui-1.10.3.custom.js');
echo $this->fetch('script');

3 - 在你看来添加（我的是 add_goal.ctp）：

<script>
$(document).ready(function(){
var myselect = document.getElementById("EventTeam"); //I needed to know which team I was looking players from. 
var team = myselect.options[myselect.selectedIndex].value; //"EventTeam" was a dropdown list so I had to get the selected value this way.
$("#EventPlayer").autocomplete({
    source: "/events/autoComplete/" + team,
    minLength: 2, //This is the min ammount of chars before autocomplete kicks in
    autoFocus: true
});
$("input:submit").button();
$("#EventPlayerId").autocomplete({
    select: function(event, ui) {
        selected_id = ui.item.id;
        $('#EventAddGoalForm').append('<input id="EventPlayerId" type="hidden" name="data[Event][player_id]" value="' + selected_id + '" />');
    }
});
$("#EventPlayerId").autocomplete({
    open: function(event, ui) {
        $('#EventPlayerId').remove();
    }
});
});
</script>

4 - 在你的控制器中（mina 是 EventController.php）：

public function autoComplete($team = null){
    Configure::write('debug', 0);
    $this->autoRender=false;
    $this->layout = 'ajax';
    $query = $_GET['term'];
    $players = $this->Event->Player->find('all', array(
        'conditions' => array('Player.team_id' => $team, 'Player.name LIKE' => '%' . $query . '%'),
        'fields' => array('name', 'id')));
    $i=0;
    foreach($players as $player){
        $response[$i]['id']=$player['Player']['id'];
        $response[$i]['label']=$player['Player']['name'];
        $response[$i]['value']=$player['Player']['name'];
        $i++;
    }
    echo json_encode($response);
}

【讨论】：

【解决方案2】：

访问下面的链接，这可能会对您有所帮助，因为在 cake2.X 版本中不再使用 ajax 助手，核心所有相关功能都移至 JS 助手类。（此处为用户贡献的 AJAX 助手的第三个链接可能会对您有所帮助）

http://bakery.cakephp.org/articles/matt_1/2011/08/07/yet_another_jquery_autocomplete_helper_2

或

http://nuts-and-bolts-of-cakephp.com/2013/08/27/cakephp-and-jquery-auto-complete-revisited/

或

http://bakery.cakephp.org/articles/jozek000/2011/11/23/ajax_helper_with_jquery_for_cakephp_2_x

【讨论】：

链接一和三已关闭。我会看看第二个链接。谢谢

【解决方案3】：

您需要使用 ajax，因为您的自动完成结果取决于您选择的团队。在 jquery 中是这样的：

var team = $('#teamdropdown').find(":selected").text();
$.ajax({
  type: "POST",
  url: 'http://domain.com/playersdata',
  data: {'team':team},
  success: function(data){ 
      console.log(data);
      //put data in for example in li list for autocomplete or in an array for the autocomplete plugin
  },
});

在玩家数据页面（控制器或模型）上的蛋糕中类似这样。

if( $this->request->is('ajax') ) {
    $arr_players = $this->Players->find('all', array('conditions'=>array('team'=>$this->request->data('team')))); //pr($this->request->data) to get all the ajax response
    echo json_encode($arr_players); 
}

还将标头设置为 json 响应和 $this->layout = null;删除布局 tpl。

另一种解决方案是在您的 php 中使用 json_encode 并将其传递给 js-code 之类的

<script>var players = <?php echo json_encode($array_players_with_teams); ?>; </script>

这个解决方案只对少量数据感兴趣，如果你有一个包含球队和球员的大型数据库，我不推荐这个，因为如果你只需要一点点数据，为什么还要加载所有这些数据...... 我没有测试代码，但它应该可以帮助你继续......

祝你好运！

【讨论】：