Cakephp form input with autocomplete

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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!