我正在使用 CakePhp 2.2.1,我在实现我刚刚在标题中提出的问题时遇到了一些问题,我找到了几个教程,但其中大部分是针对 cakephp 1.3 的,而其他的不是我想做的。我有一个包含“player_id”的“事件”表,因此一个玩家有很多事件,一个事件属于一个玩家。
在我的事件添加表单中,我按照食谱的说明进行操作,我得到一个可供选择的玩家下拉列表,但是我想要的只是写下玩家的名字并从自动完成结果中选择我想要的那个。这些球员也必须来自我之前选择的球队。有任何想法吗?
提前致谢。
特别感谢 Andrew 指出这个 api.jqueryui.com/autocomplete。但是,没有使用此指南的真正指南。所以我找到了这篇 文章,它解释了 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);
}
访问下面的链接,这可能会对您有所帮助,因为在 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
您需要使用 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>
这个解决方案只对少量数据感兴趣,如果你有一个包含球队和球员的大数据库,我不会推荐这个,因为如果你只需要一点点,为什么要加载所有这些数据......我没有t测试代码,但它应该可以帮助你继续......
祝你好运!