[Ajax] Dropdownliste mit Eingabefeld (Suggest)

Mr. Snoot · 10. Februar 2009

Hüho,

ich möchte ein Eingabefeld erstellen, bei dem während der Eingabe entsprechende Worte aus einer MySQL-DB vorgeschlagen werden (wenn ich St eintippe, sollen alle Begriffe mit St... angezeigt werden; hier gibts rechts oben eine ähnliche Funktion).

Ich hatte das ganze schon mal mit JS und einer Wortliste realisiert, da ich jetzt aber die Wörter aus einer DB beziehen muss, ist JS natürlich keine gute Idee.

Da ich von Ajax leider keine Ahnung habe, bräuchte ich ein fertiges Script - finde bei Google aber nichts brauchbares. Hat vielleicht jemand eine Idee, wo ich was finden kann?

DerEineDa · 10. Februar 2009

Also wenn ich in Google nach "ajax suggest" suche, ist das hier das erste Ergebnis und das finde ich auch durchaus brauchbar, wenn man englisch kann:

http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html

Ansonsten kann man sich auch die Quelltexte vorhandener Seiten angucken. Ich selber habe mir das vor ein paar Wochen beigebracht, indem ich mir den JavaScript hiervon angeguckt habe (einfach mal einen Buchstaben im Tags-Feld eingeben, um es zu sehen). Ich finde das ist sehr elegant gelöst, aber für Anfänger schwierig zu verstehen, weswegen ich eher oben verlinktes Tutorial empfehle.

wiked · 10. Februar 2009

Ich hoffe du meinst sowas?

http://www.ajax-community.de/code-beispiele/4632-suggest-php-mysql.html

Mr. Snoot · 10. Februar 2009

Ah, sehr gut. Hatte - wie ich im Suchprotokoll sehe - schlauerweise selbst nicht mit Ajax gesucht

Das hilft mir schon weiter. Danke.

edit: mal das erste Ergbnis: http://movie.halbleiter.org

Klappt eigentlich ganz gut

DerEineDa · 16. Februar 2009

Was ich nun vermisse ist die Möglichkeit die Vorschläge mit den Pfeiltasten auszuwählen, anstatt mit der Maus. Aber sieht soweit sehr gut aus!

Mr. Snoot · 16. Februar 2009

Das ganze ist im Moment leider keine Dropdownliste o.ä., sondern nur ein div, daher geht da nichts.

Muss ich mal schauen, ob ich das umbauen kann.

DerEineDa · 16. Februar 2009

Doch doch, das geht auch mit DIVs, siehe mein Beispiel von oben. Da ist das sogar eine Liste (<ul>)

Aber das ist wahrscheinlich recht komplex. Ich gehe davon aus, dass du dafür per JavaScript die Pfeiltasten abfangen musst oder so. Hab mir das so genau nicht angesehen.

Mr. Snoot · 2. März 2009

So,

ausgehend von diesem Code hab ich mal was gebastelt (bitte nicht lachen, kenn mich nicht aus mit JS - aber es läuft

).

Was das Ausgangsscript macht:

mit der Tastatur (Pfeil rauf/runter) kann aus einer ul-Liste ein li-Element ausgewählt werden
dieses wird dann einfach als Text auf der Seite ausgegeben

Was mein abgeändertes Script macht:

mit der Tastatur (Pfeil rauf/runter) kann aus einer ul-Liste ein li-Element ausgewählt werden
dieses wird in das Sucheingabefeld übernommen
das jeweils ausgewählte Element wird entsprechend der CSS-Formatierung für die Links in der Liste hervorgehoben (identisch zum Hovereffekt mit der Mouse)
Das Div zeigt - falls die Liste lang genug ist - eine Scrolleiste an, die mit der Tastatur mitgescrollt wird

index.html:

PHP:

<html>
  <head>
    <style type="text/css">
    ul { margin:0; padding:0; list-style-type:none }
    div#suggests
    {
      margin:0;
      overflow-y:auto;
      height:96px;
      width:145px;
      border:1px solid #000;
      display:block;
    }

    div#suggests a:link
    {
      color:#000;
      line-height:19px;
      width:100%;
      text-decoration:none;
      font-size:12px;
      font-family:Verdana;
      display:block;
    }
    
    div#suggests a:visited
    {
      color:#000;
      line-height:19px;
      width:100%;
      text-decoration:none;
      font-size:12px;
      font-family:Verdana;
      display:block;
    }

    div#suggests a:hover
    {
      color:#FFF;
      line-height:19px;
      width:100%;
      text-decoration:none;
      font-size:12px;
      font-family:Verdana;
      background-color:#39F;
      display:block;
    }
    
    div#suggests a:active
    {
      color:#000;
      line-height:19px;
      width:100%;
      text-decoration:none;
      font-size:12px;
      font-family:Verdana;
      display:block;
    }

    </style>
    <script type="text/javascript">

    function eventHandling(element,type,callBack,returnParams)
    {
      var returnParams = returnParams;        
          
      if(document.addEventListener)
      {
        if(type.match(/^on/)) type = type.replace(/^on/,"");
        element.addEventListener(type,handleEvent,false);
      }
      else // IE
      {
        if(!type.match(/^on/))  type = "on"+type; 
        element.attachEvent(type,handleEvent);
      }
        
      function handleEvent (evt)
      {
        var event  = (evt)?evt:(window.event)?window.event:'';
                
        if(event.stopPropagation)
        {
          event.stopPropagation();
        }
        else
        {
          event.cancelBubble = true;
        }
            
        var target = event.srcElement || event.currentTarget;            
          
        callBack.call(callBack,event,target,(returnParams)?returnParams:null);
      }
    }
      
    function keynavigation (obj)
    {
      var curElement  = null;
      var naviElement = null;
    
      function clearSpaces (strOut)
      {
        strOut = strOut.replace(/>\s+/gm, '>');
        strOut = strOut.replace(/\s+</gm,'<');
        strOut = strOut.replace(/>\s+</gm,'><');                             
        return strOut;
      }
    
      function keyPressed (evt)
      {
        var curKey = evt.keyCode;
        var div_id = document.getElementById('suggests');
        var txt_id = document.getElementById('eingabe');

        switch (curKey)
        {
          case 38:
          if(curElement && curElement.previousSibling)
          {
            if(curElement.nextSibling)
            {
              div_id.scrollTop-=19; // Div scrollen, erst ab vorletztem Element
            }
            curElement = curElement.previousSibling;        
            txt_id.value = curElement.firstChild.id;
            curElement.firstChild.style.color = '#FFF';
            curElement.firstChild.style.backgroundColor = '#39F';
            div_id.onmouseover = function style_weg()
            { // bei Mouseover im Div den Hovereffekt von Tastaturauswahl löschen
              curElement.firstChild.style.color = curElement.firstChild.style.backgroundColor = '';
            }
             // Hovereffekt vom zuletzt markierten Element löschen
            curElement.nextSibling.firstChild.style.color = curElement.nextSibling.firstChild.style.backgroundColor = '';
          }
          break;
        
          case 40:
          if(curElement)
          {
            if(curElement.nextSibling)
            {
              if(curElement.previousSibling)
              {
                var pos = div_id.scrollTop+=19; // Div scrollen, erst ab zweitem Element
              }
              curElement = curElement.nextSibling;
              txt_id.value = curElement.firstChild.id;
              curElement.firstChild.style.color = '#FFF';
              curElement.firstChild.style.backgroundColor = '#39F';
              div_id.onmouseover = function style_weg()
              { // bei Mouseover im Div den Hovereffekt von Tastaturauswahl löschen
                curElement.firstChild.style.color = curElement.firstChild.style.backgroundColor = '';
              }
              // Hovereffekt vom zuletzt markierten Element löschen
              curElement.previousSibling.firstChild.style.color = curElement.previousSibling.firstChild.style.backgroundColor = '';
            }
          }
          else
          {
            curElement = naviElement.firstChild;
            txt_id.value = curElement.firstChild.id;
            curElement.firstChild.style.color = '#FFF';
            curElement.firstChild.style.backgroundColor = '#39F';
          }
          break;
        
          case 13:
          if(curElement)
          {
            div_id.style.visibility = 'hidden';
            //txt_id.focus();  
          }
          break;

          case 27:
          {
            div_id.style.visibility = 'hidden';
          }
          break;
          default:  return;
        }
      }
            
      this.init = function ()
      {
        eventHandling(document,"keydown",keyPressed);
        obj.innerHTML = clearSpaces (obj.innerHTML); 
        naviElement   = obj;
      }
    }
      
    window.onload = function () {
    var k = new keynavigation(document.getElementById('sug_list'));
    k.init();
  }
  </script>
  <script type="text/javascript">
    function insert_eingabe(id, eingabe)
    {
      document.getElementById(eingabe).value = id;
      document.getElementById('suggests').style.visibility = 'hidden';
    }
  </script>  
  </head>
  <body>
    <form method="POST" action="">
      <input type="text" id="eingabe"><input type="submit" value="OK">
      <div id="suggests">
        <ul id="sug_list">
          <li><a id="id_eins"   onclick="insert_eingabe(id, 'eingabe')" href="#">Eins</a></li>
          <li><a id="id_zwei"   onclick="insert_eingabe(id, 'eingabe')" href="#">Zwei</a></li>
          <li><a id="id_drei"   onclick="insert_eingabe(id, 'eingabe')" href="#">Drei</a></li>
          <li><a id="id_vier"   onclick="insert_eingabe(id, 'eingabe')" href="#">Vier</a></li>
          <li><a id="id_fuenf"  onclick="insert_eingabe(id, 'eingabe')" href="#">Fuenf</a></li>
          <li><a id="id_sechs"  onclick="insert_eingabe(id, 'eingabe')" href="#">Sechs</a></li>
          <li><a id="id_sieben" onclick="insert_eingabe(id, 'eingabe')" href="#">Sieben</a></li>
          <li><a id="id_acht"   onclick="insert_eingabe(id, 'eingabe')" href="#">Acht</a></li>
          <li><a id="id_neun"   onclick="insert_eingabe(id, 'eingabe')" href="#">Neun</a></li>
          <li><a id="id_zehn"   onclick="insert_eingabe(id, 'eingabe')" href="#">Zehn</a></li>
          <li><a id="id_elf"    onclick="insert_eingabe(id, 'eingabe')" href="#">Elf</a></li>
          <li><a id="id_zwoelf" onclick="insert_eingabe(id, 'eingabe')" href="#">Zwoelf</a></li>
        </ul>
      </div>
    </form>
  </body>
</html>

Die Liste muss dann halt noch dynamisch via Ajax generiert werden.

Suche

[Ajax] Dropdownliste mit Eingabefeld (Suggest)

Mr. Snoot

Gast

DerEineDa

Lieutenant

wiked

Ensign

Mr. Snoot

Gast

DerEineDa

Lieutenant

Mr. Snoot

Gast

DerEineDa

Lieutenant

Mr. Snoot

Gast

Ähnliche Themen