Question

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

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

提前致谢。

Answer 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 - 在你的Controller中（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);
}

Answer 2

访问下面的链接，这可能会帮助你，因为ajax助手不再是cake2.X版本的核心所有相关的功能都转移到了JS helper类。（这里为用户贡献的AJAX助手的第三个链接可以帮助你）< / p>

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

Answer 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 respons和$ this-＆gt; layout = null;删除布局tpl。

另一个解决方案是在你的php中使用json_encode并将其传递给js-code，如

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

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

祝你好运！

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

3 个答案: