Autocomplete

Ich habe mich für scriptaculous entschieden. Siehe http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter

Einbinden scriptaculous

In den Header folgendes HTML:

<script src="./javascripts/prototype.js" type="text/javascript"></script>
<script src="./javascripts/scriptaculous.js" type="text/javascript"></script>

Formularfeld

Ein Input Feld sieht dann folgendermassen aus:

<input type="text" size="50"
  name = "lt_name"
  id = "lt_name"
  value = "">
<span id="lt_name_indicator" style="display: none">
  <img src="images/system/spinner.gif" alt="Working..." /></span>
<div id="lt_name_autocomplete" class="autocomplete" style="display:none"></div>

<script type="text/javascript" language="javascript" charset="UTF-8">
  // <![CDATA[
  new Ajax.Autocompleter("lt_name","lt_name_autocomplete","ajax.php",{
    tokens: ",",
    indicator: "lt_name_indicator",
    minChars: 2,
    parameters: "field=lt_name"
  });
  // ]]>
</script>

Bei mir wird es aus php erzeugt:

/**
     * Print input field with AJAX autocomplete
     *
     * @param     $name           fieldname
     * @param    $valueArray      array with current values
     * @param    $cols            number of columns
     * @param    $minChars        number of characters typed before search gets sent
     * @return string
     */
    function printInputFieldAjax($name, $valueArray=array(),$cols=50, $minChars=1) {
       
        global $libpath;
        $prepath = $libpath ? '': '../';
       
        // get name
        $fieldname = substr($name,2,1) == '_' ? $name : $this->fieldPrefix .$name;
       
        // print field
        print  getLabel($fieldname). getTextTranslated('field_pre');
        print '<input
            type="text" size="'.$cols.'"
            name = "' .$fieldname .'"
            id = "' .$fieldname .'"
            value = "'.$valueArray[$fieldname].'">';
       
   
        // autocomplete
        print '<span id="'.$fieldname.'_indicator" style="display: none"><img src="'.$prepath.'images/system/spinner.gif" alt="Working..." /></span>';
   
        print'<div id="'.$fieldname.'_autocomplete" class="autocomplete" style="display:none"></div>';
       
        print '<script type="text/javascript" language="javascript" charset="UTF-8">
        // <![CDATA[
          new Ajax.Autocompleter("'.$fieldname.'","'.$fieldname.'_autocomplete","'.$prepath.'ajax.php",{
                  tokens: ",",
                indicator: "'.$fieldname.'_indicator",
                minChars: '.$minChars.',
                parameters: "field='.$fieldname.'"
                   
            });
        // ]]>
        </script>';
    print getTextTranslated('field_post');
       
    }

AJAX Responder

Die Ergebnisse kommen aus ajax.php und sind eine ul li Liste mit korrektem HTTP header und in der richtigen Codierung (hier: UTF-8)

<?php
    header('Content-Type: text/html; charset=UTF-8')  ;
   
    /**
     * AJAX data delivery
     *
     * @author erwin
     * @version $Revision: 18 $
     * @lastrevision $Date: 2009-05-18 17:13:42 +0200 (Mon, 18 May 2009) $
     * @modifiedby $LastChangedBy: erwin $
     * @lastmodified $LastChangedDate: 2009-05-18 17:13:42 +0200 (Mon, 18 May 2009) $
     * @filesource $URL: localhost/svn/applications/xxx/trunk/ajax.php $
     *
     **/
   
    global $libpath;
    $libpath = 'backend/';
   
    require_once $libpath . 'modules/init.php';
   
    echo "<ul>";
   
    $fieldName = $_POST['field'];
    $typedString = $_POST[$fieldName];
    $result = '';
      
    if($fieldName == 'lt_keyword') {
        // create data access: keywords
        $Keyword = new Keyword();
        $Keyword->setFilter('kw_name', $typedString, 1);
        $keywords = $Keyword->getResults();
   
        foreach ($keywords as $keyword) {
            $result .= '<li id="'.$keyword['kw_id'].'">' . $keyword['kw_name'] .' </li>';
        }
    }
   
    print $result;
    echo "</ul>";
   
?>