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自动完成

回答

相关问题