Philipp.: Bei Texteingabe in input-Feld div einblenden

Beitrag lesen

SELF-Forum

Bei Texteingabe in input-Feld div einblenden

Philipp.
– Informationen zu den Bewertungsregeln

Bessere Alternative: die variablen Teile einer Funktion, die außerhalb der Funktion beim Aufruf bereits bekannt sind, der Funktion als Parameter übergeben - wie in meinem Beispiel.

Okay, ich werde das zukünftig mal berücksichtigen.

Damit ist zumindest die statische "Google Suggest"-Variante fertig :)

<html>  
  <head>  
  
    <script type="text/javascript">  
      function showtext(txt, textl)  
      {  
        var div = document.getElementById('textl');  
        if (div)  
        {  
          if (txt.value == "")  
          {  
            div.style.visibility = 'hidden';  
          }  
          else if (div.innerHTML != "")  
          {  
            lis = document.getElementsByTagName('li').length;  
            if (lis > 5)  
            {  
              div.style.height = '100px';  
            }  
            else if (lis <= 5)  
            {  
              div.style.height = 20*lis + 'px';  
            }  
            div.style.visibility = 'visible';  
          }  
        }  
      }  
      </script>  
  
    <script type="text/javascript">  
      function insert(lex)  
      {  
        document.getElementById('eingabe').value = lex;  
        document.getElementById('textl').style.visibility = "hidden";  
      }  
    </script>  
  
    <style type="text/css">  
      #textl  
      {  
        visibility: hidden;  
        width:199px;  
        border:1px solid black;  
        display:block;  
        overflow-x: hidden;  
        overflow-y: auto;  
      }  
  
      #eingabe { width:200px; }  
      #textl a:link { color:#000; }  
      #textl a:hover { color:#FFF; background-color:#39F; display:block; width:100%; }  
      #textl ul { list-style-type:none; margin:0; }  
    </style>  
  
  </head>  
  
  <body>  
  
    <input type="text" id="eingabe" onkeyup="showtext(this, 'textl')"><br>  
    <div id="textl">  
      <ul>  
        <li><a lex="Anderer Text 1" href="#" onclick="insert(lex)">Text1</a></li>  
        <li><a lex="Anderer Text 2" href="#" onclick="insert(lex)">Text2</a></li>  
        <li><a lex="Anderer Text 3" href="#" onclick="insert(lex)">Text3</a></li>  
        <li><a lex="Anderer Text 4" href="#" onclick="insert(lex)">Text4</a></li>  
        <li><a lex="Anderer Text 5" href="#" onclick="insert(lex)">Text5</a></li>  
        <li><a lex="Anderer Text 6" href="#" onclick="insert(lex)">Text6</a></li>  
        <li><a lex="Anderer Text 7" href="#" onclick="insert(lex)">Text7</a></li>  
        <li><a lex="Anderer Text 8" href="#" onclick="insert(lex)">Text8</a></li>  
      </ul>  
    </div>  
  
  </body>  
  
</html>

Jetzt muss ich daheim noch das Ajax-Script reinbasteln, was das div befüllt und fertig ist die Laube :D

Also vielen Dank für die ausführliche Unterstützung. Hat mir sehr geholfen!

Beitrag melden
–
Informationen zu den Bewertungsregeln