Zend_Form + Autocomplete

Da ich im Netz kein zufriedenstellendes Beispiel für Zend_Form in Verbindung mit Autocomplete finden konnte, möchte ich hier meinen Lösungsansatz zeigen. Vorraussetzungen sind hierfür ein Zend_Form, sowie aktiviertes jQuery + jQueryUI.

Im Formular passiert erstmal nix Besonderes. Es wird ein normales Zend_Form_Element_Text angelegt.

$autoCompleteElement = new Zend_Form_Element_Text('autoCompleteElement');

Der Controller bekommt eine zusätzliche autocompleteAction spendiert, welche wir dann später über jQuery ansprechen wollen, um die Werte zur aktuellen Eingabe zu erhalten. Wichtig ist hier, die Werte JSON-kodiert zu übergeben, um sie später im Javascript-File sauber auslesen zu können. Bei meinem $returnArray soll der Value später ins Formularfeld eingetragen werden, wohingegen das Label als Anzeige für die Auswahl beim Autocomplete gedacht ist.

public function autocompleteAction()
{
    $post = $this->_request->getPost();
    $searchString = $post['searchString'];
    
    // $returnArray zur Demonstration meiner übergebenen Daten
    $returnArray[$row['value']] = $row['label']; 
    $valuesJson = Zend_Json::encode($returnArray);
    echo $valuesJson;
    $this->view->layout()->disableLayout();
    $this->_helper->viewRenderer->setNoRender(true);
}

Das Javascript kümmert sich schlussendlich um das Absenden des Requests und das Mappen der empfangenen Daten.

$(document).ready(function() {
    $("input#autoCompleteElement").autocomplete({
        source : function( request, response) {
            url = "/meinModul/meinController/autocompleteAction";
            data = { 'searchString' : request.term };
            $.post(url, data, function(JSON){
                response($.map(JSON, function (item, value) {
                    return {
                        label: item,
                        value: value,
                        source: item};
                    }));
            }, 'json');
        },
        minLength: 1,
        autoFocus: true
    });
});

Zum Schluss natürlich nicht vergessen das Javascript in euer View-Script mit einzubinden.

Kommentar verfassen