cakephp 2.6中的自动完成功能

时间:2016-03-18 08:07:09

标签: javascript ajax autocomplete cakephp-2.6

我正在尝试在我的应用程序中实现自动完成功能。但它没有得到建议,而是显示我的代码的java脚本行。 例如:如果我输入'n',那么它会显示所有带有'n'字符的java脚本行。我已将所有必需的.js和.css文件粘贴到各自的文件夹中。我不喜欢缺少的地方。请帮我。我正在粘贴我的控制器并查看部分。

控制器:

 public function find_name() {
    if ($this->request->is('ajax')) {

        $this->autoRender = false;            
        $panel_name = $this->request->query('term');            
        $results = $this->Panel->find('all', array(
                                       'conditions' => array('Panel.name LIKE ' => '%' . $panel_name . '%'),
                                       'recursive'  => -1
                                       ));

        $resultArr = array();
        foreach($results as $result) {
           $resultArr[] = array('label' =>$result['Panel']['name'] , 'value' => $result['Panel']['name'] );
        }
        echo json_encode($resultArr);                                   
   }`

查看:

$('.pchange').each(function()
{        
    var g=$(this).attr('id');
    //alert(g);
    var lastChar = g.replace ( /[^\d.]/g, '' );
    $('#name'+lastChar).autocomplete("PanelsController/find_name", 
    {
        minChars:       1,
        delay:          0,
        maxCacheLength: 100,
        onItemSelect: 
        function (item)
        {   
            alert(item);
            $("#name"+lastChar).val(item.data[0]);
            $("#phone"+lastChar).val(item.data[1]);
            $("#email"+lastChar).val(item.data[2]);
        }
    });  
});

1 个答案:

答案 0 :(得分:0)

请试试这个。你还没有退出json数据


    public function find_name() {
        if ($this->request->is('ajax')) {

            $this->autoRender = false;            
            $panel_name = $this->request->query('term');            
            $results = $this->Panel->find('all', array(
                                           'conditions' => array('Panel.name LIKE ' => '%' . $panel_name . '%'),
                                           'recursive'  => -1
                                           ));

            $resultArr = array();
            foreach($results as $result) {
               $resultArr[] = array('label' =>$result['Panel']['name'] , 'value' => $result['Panel']['name'] );
            }
            echo json_encode($resultArr); 
           exit;                                  
    }


    $(".autocomplete").autocomplete({
        source: function( request, response ) {
            $.ajax({
              url: "<?php echo $this->Html->url(array('action' => 'find_name')); ?>",
              dataType: "json",
              data: {
                q: request.term
              },
              success: function( data ) {
                response( data );
              }
            });
          },
          minLength: 1,
          select: function( event, ui ) {

          },
          open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
          },
          close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
          }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {

         return $( "<li>" )
        .data( "ui-autocomplete-item", item )
        .append("<a href=javascript:void(0);>" + item.label + "</a>")
        .appendTo( ul );
    };


还请包括jquery-ui.js及其css