2013-10-25 109 views
1

我使用CakePhp 2.2.1,我遇到了一些问题来实现我刚才在标题中提到的问题,我发现了几个教程,但其中大部分都是用于cakephp 1.3,而其他的不是我想做。我有一个包含“player_id”的“events”表,因此玩家有很多事件,一个事件属于玩家。CakePHP表单输入与自动完成

在我的活动添加表格中,我按照食谱的说法进行操作,我得到一个可供选择的玩家的下拉列表,但是我想要的是只写出玩家的名字并从自动完成结果中选择一个我想要的玩家。而且这些球员必须来自我之前选择的球队。有任何想法吗?

在此先感谢。

+0

我用jQuery的自动完成我的项目之一:http://api.jqueryui.com/autocomplete/ – Andrew

回答

4

特别感谢安德鲁指出这 api.jqueryui.com/autocomplete。但是没有真正的指导来使用这个。所以我发现这post,这解释了阿布舍克的第二个链接说什么,但我可以更好地理解它。所以这里是我的解决方案,如果有人感兴趣:

1 - 从autocomplete页面下载您需要的.js。将它保存在app/Webroot公司/ JS

2 - 无论是在您的应用程序/浏览/设计/ default.thtml中或要使用自动完成添加视图:

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 - 在你的控制器(米娜是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); 
} 
0

访问下面的链接,这可能会帮助你,因为ajax帮手不再在cake2.X版本核心所有相关的功能转移到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

+0

链接一,三下。我会看看第二个链接。谢谢 –

0

您需要使用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 
    }, 
}); 

而且在playersdata页(控制器或模型)像这样的蛋糕。

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代码一样

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

这种解决方案只适用于小数据量有趣的,如果你有一个团队一个大的数据库和我不会推荐这样的球员,因为为什么要加载所有这些数据,如果你只需要一点点呢... 我没有测试代码,但它应该可以帮助你继续...

好运气!