0

使命：

在称为部门的员工表单字段中实现部门的自动完成（保存在部门表中）。用户输入部门名称的几个拼写，这会显示与部门匹配的名称列表用户选择一个，就是这样。

平台

  1. 蛋糕PHP 2.1
  2. Jquery UI Autocomplete（Jquery UI 库版本 1.8.18 的一部分）

数据库模型

员工 (id, first_name,last_name,department_id) 部门 (id,name)

所以在我的 add.ctp 文件中，ajax 调用类似于

      $( "#auto_complete" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url:  "/employees/showDepartment",
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    alert("success--");
                    response( $.map( data, function( item ) {
                    //alert(item);
                        return {
                            label: item.name,
                            value: item.id
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });

我的 EmployeeController 中有一个名为 show_depatment() 的操作

    public function getAddress() {
        $this->autoRender = false;// I do not want to make view against this  action. 
        $this->log($this->params->query['name_startsWith'] , 'debug');
        $str = $this->params->query['name_startsWith'];
        $this->log($str, 'debug');
        $this->layout = 'ajax';
        $departments = $this->Employee->Department->find('all', array( 'recursive' => -1,
            'conditions'=>array('Department.name LIKE'=>$str.'%'),
   'fields'=>array('name', 'id')));
        //$this->set('departments',$departments);
        $this->log($departments, 'debug');
        echo json_encode($departments);
}

我不希望 show_department 操作有任何视图，所以我做了$this->autoRender = false;

但它没有按预期工作。

当我在响应和 HTLM 部分使用萤火虫调试响应时，它显示

           [{"Department":{"name":"Accounting","id":"4"}}] // when i type "acc" in input field

问题

  1. 如何使其显示在表单字段中。
  2. 回声 json_encode($departments); 以json格式发送响应的正确方法吗？
  3. 当我在 ajax 调用 (alert(item);) 的成功部分发出警报时，它给出的错误为“未定义”
4

1 回答 1

2

我是胖模型和瘦控制器的朋友，所以我的控制器动作看起来像这样

public function getAddress()
{
    if($this->RequestHandler->isAjax()) {
        Configure::write('debug', 0);
        $this->layout = 'ajax';
        $this->autoRender = false;
        echo json_encode($this->Employee->Department->getAddress($this->params['url']['term']));
        exit;
    }
}

和我的部门模型方法：

public function getAddress($str)
{

    $rs = array();
    $search =  $this->find('all', array( 
        'recursive' => -1,
        'conditions'=>array('Department.name LIKE'=>$str.'%'),
        'fields'=>array('name', 'id')
    ));


    if (!empty($search))
    {
        //the jquery ui autocomplete requires object with label/value  so we need to traverse the query results and create required array 

        foreach ($search as $key => $val)
        {
            $rs[] = array('label' => $val['Department']['name'], 
              'value' => $val['Department']['id']);
        }
    }
    return $rs;
}

最后我的视图条目是这样的：

$( "#auto_complete" ).autocomplete({
    minLength: 2,
    source: function( request, response ) {
        var term = request.term;
        if ( term in cache ) {
            response( cache[ term ] );
            return;
        }

        lastXhr = $.getJSON( "/employees/showDepartment", request, function( data, status, xhr ) {
            cache[ term ] = data;
            if ( xhr === lastXhr ) {
                response( data );
            }
        });
    }
});

希望这可以帮助。

于 2012-08-17T11:08:29.307 回答