Kombinationsfeld mit HTML
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abakus
abba
abbau
beitrag
cool vielen dank
diversen tastenkombinationen
einfache lsung
einsatz
encoding
funktioniert bestens
gewrz
grad
hintergrund
meisten benutzer
normalerweise
objekt
schwarz
-
Ich will in meine Seite ein Kombinationsfeld einbauen wie hier abgebildet: http://computerfreak1.lima-city.de/sonstiges/feld.JPG
Allerdings soll es so sein, dass man dort oben was reinschreiben kann (wo grad \"<alle>\" schwarz hinterlegt ist) und dass dann automatisch zu dem Wort runtergescrollt wird was den Anfang hat. Wenn man z.B. oben \"Gew\" eingibt, dass dann zu dem Wort \"Gewürze\" runtergescrollt wird.
Ist so etwas überhaupt mit HTML möglich, denn ich kannte es bis jetzt nur aus Access? Und normalerweise gibt es ja diese Listen auch bei HTML aber eben nur so, sodass man oben kein Wort reinschreiben kann. Geht dann sowas bei HTML? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du brauchst auf jeden Fall JavaScript dafür.
Ich hab mal ein wenig rumgetestet und habe mich dann gegen den Einsatz des event-Objektes für dieses Problem entschieden.
Einfach weil die meisten Benutzer dann nicht verstehen werden, was da im Hintergrund abläuft und die Browser mit diversen Tastenkombinationen und Focusreaktionen nicht berechenbar sind.
Daher eine einfache Lösung, welche aber ein Suchfeld benutzt:
<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?> <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head> <title></title> </head> <body> <div> <form id=\"foo\" action=\"#\" method=\"get\"> <div> <select size=\"1\" id=\"sel\"> <option>---</option> <option>abba</option> <option>abakus</option> <option>abbau</option> </select> <input type=\"text\" value=\"Suche\" onclick=\"this.value=\'\'\" onkeyup=\"dosearch()\" id=\"sucher\" /> </div> </form> </div> <script type=\"text/javascript\">/* <![CDATA[ */ sucher=document.getElementById(\'sucher\'); sel=document.getElementById(\'sel\'); function dosearch() { elem=sel.childNodes.length; for(k=0;k<elem;k++) { if(sel.options[k].text.indexOf(sucher.value)==0)sel.options[k].selected=true; } } /* ]]> */</script> </body> </html>
Beitrag geändert: 5.9.2007 11:52:09 von bladehunter -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
