Cakephp 2.1 和 Jquery UI 自动完成功能不起作用

Question

我尝试在 cakephp 2.1 从数据表中获取数据中实现自动完成没有成功请帮助我

默认布局

    echo $this->Html->script('jquery-1.8.3');
    echo $this->Html->script('jquery-ui-1.9.2.custom');

在查看文件中

 $('.TextBox').keydown(function (e){
   var FieldId =  $(this).attr('id');
   var ColName =  $(this).attr('title');
   var table = document.getElementById("dbTable").value;
   var TableName = table + "_docs";
   var TextValue = ""

   if (e.which >= 32 || e.which < 127) {
      var c = String.fromCharCode(e.which);
      TextValue = $(this).val() + c;
      }

  if(TextValue != ""){
              $.ajax({
              type:'POST',
              url:"../AutoSearch/" + TableName + "/" + ColName + "/" + TextValue ,
              success:function(response){
              var data = response.split("|");
              $('#' + FieldId).autocomplete(data);
              }
        });
       }
  });

在控制器中

public function AutoSearch($table,$col,$text){
       $this->autoRender=false;
       if($this->RequestHandler->isAjax()){
         Configure::write('debug', 0);
         if(trim($text) != ""){
           $info = "";
           $info = $this->Template->getAutoComplete($table,$col,$text);
           }
         else
         {
             $info = "";
         }
         return $info;
      } 
    }

在模型中

     public function getAutoComplete($table,$col,$text){
          $sql = "select " . $col . " from " . $table . " where " . $col . " Like '%" . $text . "%'";
          $ret = $this->query($sql);
          $rText = "";
          foreach($ret as $val){
               if($rText == ""){
                     $rText = $val[$table][$col] . "|";}
                  else {
                $rText = $rText . $val[$table][$col] . "|";}
            }
              return $rText;
    }

firebug 中的错误消息

TypeError: this.source 不是函数

.apply(实例，参数);

Answer 1

作为起点，我建议使用默认的 jQuery 自动完成 http://jqueryui.com/autocomplete/ 并查看类似的内容。

在视图中

$('.TextBox').autocomplete({
        source: function(request, response) {
            $.ajax({
               type:'POST',
               url:"/your_controller/your_action/",
               data: {
                    column: 'col',
                    search: request.term // request.term will have value in field
                },
               success:function(response){
                    // to see what you are getting to browser
                    // console.log(response);
                    response( $.map( response, function( item ) {
                        // depending on what you send, return object you need
                        // label will be shown in list, value will be set when selected
                        return {
                            label: item.name,
                            value: item.id
                        }
                    }));
                 }
               }
            });
        }
    });

在控制器中

public function your_action() {
    // to see what you are getting to controller
    // debug($this->request->data);
    exit( json_encode($this->YourModel->find('list', array('conditions' => array())));
}