Cakephp表单输入与自动完成 [英] Cakephp form input with autocomplete

问题描述

我使用CakePhp 2.2.1，我有一些问题，以实现我刚刚问的标题，我发现了几个教程，但大多数是为cakephp 1.3和其他人不是我想做的。我有一个事件表，其中包含一个player_id，因此一个玩家有很多事件，一个事件属于一个玩家。

I am using CakePhp 2.2.1 and I am having some problems to implement what I just asked in the title, I found several tutorials but most of them are for cakephp 1.3 and the others are not what I want to do. I have a "events" table which contains a "player_id" thus a Player has many Events and an Event belongs to a Player.

在我的活动中添加表单我按照菜单说明继续，我得到一个可供选择的玩家的下拉列表，但是我想要的只是写出播放器，并从自动完成结果中选择一个我想要的。也是这些球员必须来自我之前选择的球队。任何想法？

In my Event add form I proceed as the cookbook says and I get a dropdown list of players to choose from, however what I want is to just write the names of the players and select the one I want from the autocomplete results. Also these players must be from the team that I select before that. Any ideas?

提前感谢。

推荐答案

Andrew指出此 api.jqueryui.com/autocomplete 。但是没有真正的指导使用这一个。所以我发现这个帖子 ，这解释了Abhishek的第二个链接说，但我可以更好地了解它。所以这里是我的解决方案，如果有人感兴趣：

Special thanks to Andrew for pointing out this api.jqueryui.com/autocomplete. However there is not a real guide to use this one. So i found this post, which explains what Abhishek's second link says but I could understand it better. So here is my solution if anyone is interested:

1 - 从自动完成页面下载.js你需要。将它保存在app / webroot / js

1 - Download from the autocomplete page the .js you need. Save it in app/webroot/js

2 - 在您的应用程序/ View / Layouts / default.ctp中或在要使用自动完成功能的视图中add： / p>

2 - Either in your app/View/Layouts/default.ctp or in the view you want to use the autocomplete add:

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）：

3 - In your view add (mine was 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）：

4 - In your Controller (mina was 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);
}

这篇关于Cakephp表单输入与自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！