Benutzer-Werkzeuge

Webseiten-Werkzeuge


webedition:code-examples:filling-autocomplete-control-with-block-yui

AutoComplete Control über Block füllen (Yahoo! UI Library)

Das folgende Beispiel zeigt Ihnen, wie Sie für ein Eingabefeld auf Ihrer Website einen Autocompleter erstellen. Sobald ein Besucher Ihrer Website den Cursor in das Eingebefeld positioniert, erhält er die von Ihnen vorgegebenen Werte zur Auswahl. Gibt der Besucher einen ersten Buchstaben in das Eingabefeld ein, werden in der Auswahl nur noch die Einträge angeboten, die auch mit diesem Buchstaben beginnen.

Die vorgegebenen Werte werden vom Redakteur über einen Block (<we:block>) eingegeben.

Für die Funktion und die Darstellung wird das AutoComplete Control der Yahoo! User Interface Library (YUI) verwendet.

Screenshot

Demo

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <we:title></we:title>
    <we:description/>
    <we:keywords/>
    <we:charset defined="UTF-8">UTF-8</we:charset>
    <we:ifEditmode>
      <!--
        Dieses CSS-Definitionen dienen dazu, Formatierung innerhalb
        der Ansicht "Bearbeiten" für den Redakteur durchzuführen.
      -->
      <style type="text/css">
        ul.block li {
          margin-bottom: 10px;
        }
      </style>
    </we:ifEditmode>
    <we:ifNotEditmode>
      <style type="text/css">
        html {
          font-family: arial;
          font-size: .8em;
          color: #000000;
        }
 
        a {
          color: #000000;
        }
      </style>
 
      <!-- Yahoo! UI Library - AutoComplete Control -->
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/autocomplete/assets/skins/sam/autocomplete.css" />
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-min.js"></script>
 
        <style type="text/css">
          #dataautocomplete {
            width: 15em;
            padding-bottom: 2em;
          }
 
          #dataautocomplete {
            z-index: 9000;
          }
 
          #datainput {
            _position: absolute;
          }
        </style>
      <!-- /Yahoo! UI Library - AutoComplete Control -->
    </we:ifNotEditmode>
  </head>
  <body class="yui-skin-sam">
 
    <!--
      Dieser Bereich ist nur für den Redakteur innerhalb
      der Ansicht Bearbeiten sichtbar.
      Er dient nur der Eingabe.
    -->
    <we:ifEditmode>
      <ul class="block">
        <we:block name="Data">
          <li>
            <we:input type="text" name="Text" size="30" html="false" php="false"/>
          </li>
        </we:block>
      </ul>
    </we:ifEditmode>
 
    <!-- Dieser Bereich ist nicht in der Ansicht Bearbeiten sichtbar. -->
    <!-- Er dient nur der Ausgabe. -->
    <we:ifNotEditmode>
      Bundesland:<br />
      <div id="dataautocomplete">
        <input id="datainput" type="text" />
        <div id="datacontainer"></div>
      </div>
 
      <script type="text/javascript">
        <!--
          // Daten des Blocks in ein JavaScript-Array speichern
          dataArray = [
            <we:block name="Data">
              "<we:var type="document" name="Text" htmlspecialchars="true"/>"
              <we:ifNotPosition type="block" position="last" reference="Data">,</we:ifNotPosition>
            </we:block>
          ];
 
          ACJSArray = new function() {
            // Datenquelle instanziieren
            this.oACDS = new YAHOO.widget.DS_JSArray(dataArray);
 
            // AutoCompleter instanziieren
            this.oAutoComp = new YAHOO.widget.AutoComplete('datainput','datacontainer', this.oACDS);
            this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
            this.oAutoComp.typeAhead = true;
            this.oAutoComp.useShadow = true;
            this.oAutoComp.minQueryLength = 0;
            this.oAutoComp.textboxFocusEvent.subscribe(function(){
              var sInputValue = YAHOO.util.Dom.get('datainput').value;
              if(sInputValue.length === 0) {
                var oSelf = this;
                setTimeout(function(){oSelf.sendQuery(sInputValue);},0);
              }
            });
          };
        -->
      </script>
    </we:ifNotEditmode>
 
  </body>
</html>

Weiterführende Informationen

webedition/code-examples/filling-autocomplete-control-with-block-yui.txt · Zuletzt geändert: 2015/12/22 16:39 von Marc Krämer

Recent changes RSS feed