dongtiaobeng7901
2013-10-25 15:43
浏览 7

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

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?

Thanks in advance.

图片转代码服务由CSDN问答提供 功能建议

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

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

提前致谢。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • doupeng5320 2013-11-13 20:14
    已采纳

    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 - Download from the autocomplete page the .js you need. Save it in app/webroot/js

    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 - 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 - 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);
    }
    
    点赞 评论
  • duan7664 2013-10-25 17:49

    visit below link ,this might help you as the ajax helper is no more in cake2.X versions core all related functionality moved to JS helper class.(here third one link for AJAX helper for contributed by user may help you)

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

    or

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

    or

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

    点赞 评论
  • doumeikuan6834 2013-10-25 18:24

    You need to use ajax because your autocomplete-results depends on the team you have selected. Something like this in 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
      },
    });
    

    And in cake on playersdata page (Controller or model) something like this.

    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); 
    }
    

    Also set headers to a json respons and $this->layout = null; to remove the layout tpl.

    Another solution would be to use json_encode in your php and pass it to js-code like

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

    This solution is only interesting for a small amount of data, if you have a big database with teams and players I wouldn't recommend this, because why load all this data if you only need just a bit of it... I didn't test the code but it should help you to go on...

    Good luck!

    点赞 评论

相关推荐 更多相似问题