CakePHPの2.1とjQuery UIのオートコンプリート

Question

ミッション：

部門と呼ばれる従業員のフォームフィールドで（部署テーブルに保存された）部門のオートコンプリートを実装します。 ユーザーが部署名の一部を入力します 部門に一致する名前の一覧が表示されます ユーザーが選択したのはそれだけです。

プラットフォーム

1. CakePHPの2.1
2. のjQuery UIオートコンプリート（jqueryのUIライブラリバージョン1.8.18の一部）

データベースモデル

Emplyee（ID、 first_name、last_name、department_id） departmenトン（ID、名前）

はので、私の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. echo json_encode（$ departments）;それはjson形式で応答を送信する正しい方法ですか？それは「未定義」としてエラーになる

Answer 1

私のコントローラのアクションは、この

のように見えるので、私は脂肪のモデルとスキニーコントローラの友人だ。

私はAJAX呼び出しの成功事例の一部でアラート（警告（アイテム））

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

とfinaly私のビューエントリは次のようである：

$("#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); 
      } 
     }); 
    } 
}); 

これが役に立ちます。