2012-04-10 9 views
0

Mission:CakePHP 2.1 und JQuery UI zum automatischen Vervollständigung

zum automatischen Vervollständigung von Abteilungen implementieren (in Abteilungen Tabelle gespeichert) im Feld Mitarbeiter Form genannt Abteilung. Ein Benutzer gibt einige Schreibweisen des Abteilungsnamens ein Das bringt Liste der Namen heraus, die Abteilungen entsprechen Der Benutzer wählt einen aus und das ist es.

Plattformen

  1. CakePHP 2.1
  2. JQuery UI automatische Vervollständigung (Teil von JQuery UI-Bibliothek Version 1.8.18)

Datenbankmodell

emplyee (id, vorname, nachname, abteilung_id) abteilung t (id, name)

so in meinem add.ctp Anruf Datei Ajax ist so etwas wie

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

ich eine Aktion in meinem EmployeeController genannt show_depatment haben()

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

Ich möchte nicht show_department action, um irgendeine Ansicht zu haben, also habe ich gemacht $ this-> autoRender = false;

aber es funktioniert nicht wie erwartet.

wenn ich die Antwort debuggen Firebug in Reaktion und HTLM Abschnitt mit es zeigt

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

Frage

  1. Wie man es macht in Formularfeld angezeigt werden soll.
  2. echo json_encode ($ departments); Ist es die richtige Methode, Antworten im JSON-Format zu senden?
  3. , wenn ich in Sucess Teil von Ajax-Aufruf (alert (item);) alarmieren, gibt es Fehler als "undefiniert"

Antwort

2

ich bin Freund von Fett Modell und dünn-Controller so mein Controller-Aktion wie folgt aussieht

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

und meine Abteilung Modellmethode:

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

und finaly ist meiner Ansicht Eintrag wie folgt aus:

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

hoffe das hilft.

Verwandte Themen