CakePHP的2.1和jQuery UI自動完成

實現員工表單字段部門（保存在部門表）稱爲部門的自動完成。用戶輸入部門名稱的一些拼寫打開名稱匹配部門的列表用戶選擇一個，就是這樣。

平臺

CakePHP的2.1
jQuery UI的自動完成

數據庫模型

Emplyee（ID（jQuery的UI庫版本1.8.18部分）， first_name，last_name，department_id） departmen T（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 action有任何視圖，所以我做了$ this-> autoRender = false;

但它沒有按預期工作。

當調試響應和HTLM部分使用Firebug的反應就說明

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

問題

如何使它在表單域顯示。
echo json_encode（$ departments）;以json格式發送響應是否正確？
，當我在Ajax調用（警報（項目）;）的sucess一部分警告提示錯誤爲「未定義」

來源

2012-04-10 Hussy

我胖型號和瘦控制器的朋友，所以我的控制器動作看起來像這樣

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

希望這有助於。

來源

2012-08-17 11:08:29 thanat

CakePHP的2.1和jQuery UI自動完成

回答

相關問題