具有自动完成功能的 Cakephp 表单输入 - Cakephp form input with autocomplete

我正在使用 CakePhp 2.2.1，我在实现标题中刚刚要求的内容时遇到了一些问题，我找到了几个教程，但其中大多数是针对 cakephp 1.3 的，其他的不是我想做的。我有一个包含"player_id"的"事件"表，因此玩家有许多事件，而事件属于玩家。

在我的事件添加表单中，我按照食谱所说的进行操作，我得到了一个可供选择的玩家下拉列表，但是我想要的只是写下玩家的名字并从自动完成结果中选择我想要的玩家。此外，这些球员必须来自我之前选择的球队。有什么想法吗？

提前谢谢。

特别感谢Andrew指出这个 api.jqueryui.com/autocomplete。但是，没有真正的指南可以使用此指南。所以我找到了这篇文章，它解释了Abhishek的第二个链接所说的内容，但我可以更好地理解它。因此，如果有人感兴趣，这是我的解决方案：

1 - 从自动完成页面下载您需要.js。将其保存在应用程序/网络根目录/js 中

2 - 在应用/视图/布局/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);
}

访问下面的链接，这可能会对您有所帮助，因为 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

您需要使用 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 代码，例如

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

这个

解决方案只对少量数据感兴趣，如果你有一个包含球队和球员的大型数据库，我不推荐这个，因为如果你只需要一点点，为什么要加载所有这些数据......我没有测试代码，但它应该可以帮助您继续...

祝你好运！