0

ミッション：

部門と呼ばれる従業員フォーム フィールドで、部門 (部門テーブルに保存されている) のオートコンプリートを実装します。ユーザーが部門名のスペルをいくつか入力すると、部門に一致する名前のリストが表示されます。ユーザーが 1 つを選択すると、それだけです。

プラットフォーム

  1. CakePhp 2.1
  2. Jquery UI オートコンプリート (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; にしました。

しかし、期待どおりに機能していません。

応答でfirebugを使用して応答をデバッグすると、HTLMセクションが表示されます

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

質問

  1. フォームフィールドに表示させる方法。
  2. echo json_encode($部門); 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 に答える