Ich würde gerne eine Art Instant-Funktion in ein Formularfeld auf meiner Website integrieren, sodass man ein paar Buchstaben eintippt und dann Vorschläge gemacht werden. Danke schon mal im Voraus
Bitte genauer definieren und ggf. ein Beispiel geben. Ich versteh nicht was Du willst. Autovervollständigen von Text oder was?!
Ich würde gerne eine Art Instant-Funktion in ein Formularfeld
auf meiner Website integrieren, sodass man ein paar Buchstaben
eintippt und dann Vorschläge gemacht werden. Danke schon mal
im Voraus
So wie bei Google?
Geht nur mit Javascript:
das Input-Feld mit einem Event ausstatten, damit function aufrufen, die mit dem Value des Feldes in einer Wortliste auf Übereinstimmung prüft (RegExp), Ausgabe in einem css-popup, wo die gefundenen Begriffe mit einem onclick bedacht sind, über das dann der angeklickte Begriffe ins Inputfeld eingetragen wird.
Ob sich das lohnt??
Kannst Du Javascript und CSS??
Ich wollte so etwas ähnliches machen, wie bei Google.
Ich kann Javascript nicht und css nur ein bisschen.
Ich habe mir gedacht, dass ich ein Formular abschicke, nachdem ein Buchstabe eingetippt wurde und dann mit CGI-Bin Perl das Formular auswerten und dann in einer Datenbank suchen und im Formular über eine Liste die Vorschläge ausgeben.
Gibt es eine "einfache" Möglichkeit mit Java ein Formular abzuschicken, nachdem ein Buchstabe eingetippt wurde.
Danke schon mal für die Hilfe.
Moin!
Ich wollte so etwas ähnliches machen, wie bei Google.
Ja, unter "autocomplete" ist das auch bekannt.
Ich kann Javascript nicht und css nur ein bisschen.
Um eine Website zu erstellen, muss man HTML können. Wenn man sie schön aussehen lassen will, kommt man um CSS nicht drumrum, meine Empfehlung also: unbedingt CSS lernen (und vermutlich auch HTML, weil das noch nicht klar ist). Aber das nur so am Rande.
Ohne JavaScript wirds allerdings schwierig, denn für eine echte Autocomplete-Funktion brauchst Du u.a. eine clientseitige Lösung. Inwieweit Flash das möglich macht, entzieht sich meiner Kenntnis.
Ich habe mir gedacht, dass ich ein Formular abschicke,
nachdem ein Buchstabe eingetippt wurde und dann mit CGI-Bin
Perl das Formular auswerten und dann in einer Datenbank suchen
und im Formular über eine Liste die Vorschläge ausgeben.
Das ist genau der richtige Ansatz. Wie Du aber sicher weißt, wird beim bschicken eines Formulars eine Anfrage an den Server gesendet, der eine komplett neue Seite aufbaut. Wenn man nach jedem Tastendruck ein paar Sekunden warten darf, taugt das aber nichts. Zumal man zum direkten Absenden nach dem Tastendruck auch JavaScript braucht.
Gibt es eine "einfache" Möglichkeit mit Java ein Formular
abzuschicken, nachdem ein Buchstabe eingetippt wurde.
Wieso mit Java? Naja, Java Applets laufen zwar auch clientseitig, aber ob die eine Verbindung zum Server herstellen können, um die Datenbank abzufragen, weiß ich genausowenig, wie ob das Flash kann.
Für Dein Vorhaben gibts ne einfache Lösung: Ajax. Das ist clientseitig JavaScript und irgendwas serverseitiges (z.B. PHP). Mit Ajax wird per JavaScript eine asynchrone Anfrage an den Webserver gestellt, d.h. die Anfrage läuft, während die Seite im Browser stehen bleibt. Irgendwann später bekommst Du eine Antwort und die kannst Du auswerten und mit Hilfe von JavaScript wieder in die aktuelle Seite einbetten.
Ajax ist auch bei Wikipedia erklärt.
Und ich glaube, das wurde schon in einem vorherigen Beitrag erwähnt, wenn nicht sogar von mir ;-)
Liebe Grüße,
-Efchen
HTML ist nicht das Problem. Ich habe mir nur gedacht das müsste ich hier nicht erwähnen, weil man bei einer Homepage ohne HTML nicht weit kommt.
Ajax gucke ich mir gleich mal bei Wikipedia an.
Das Problem mit dem andauernd Abschicken habe ich mir auch schon gedacht, aber mir war keine andere Möglichkeit bekannt.
Danke für den Tipp mit dem Client.
Moin!
HTML ist nicht das Problem.
Ich hab die Erfahrung gemacht, dass bei den meisten Webmastern tatsächlich HTML das eigentliche Problem ist. Von Semantik haben erschreckend wenig jemals etwas gehört und viele denken nach wie vor, HTML sei zur Gestaltung da. Teilweise sind das sogar Firmen, die Websites für Geld anbieten, die - wie man in deren Quellcode sofort sehen kann - gar nicht wissen, was HTML ist. :-(
Das Problem mit dem andauernd Abschicken habe ich mir auch
schon gedacht, aber mir war keine andere Möglichkeit bekannt.
Ajax :-) Das sogenannte "Web 2.0". Eine schöne Sache. Wenn man immer im Hinterkopf behält, dass es Leute gibt, die kein JavaScript aktiviert haben (dürfen) und die Site trotzdem benutzen wollen.
Liebe Grüße,
-Efchen
Ich wollte so etwas ähnliches machen, wie bei Google.
Google holt sich via Ajax die Vorschläge.
Wenn es nicht zuviele sind, können diese auch gleich im script als Array hinterlegt werden.
Ich habe mir gedacht, dass ich ein Formular abschicke,
nachdem ein Buchstabe eingetippt wurde
also auch mit einem event für das input-feld, der dann in diesem Falle ein submit auslöst.
und dann mit CGI-Bin
Perl das Formular auswerten und dann in einer Datenbank suchen
und im Formular über eine Liste die Vorschläge ausgeben.
Ajax-Response kann natürlich von einem perlscript kommen.
Aber ohne Javascript kommst Du keinesfalls aus!!
Und CSS macht die Sache auch etwas übersichtlicher.
Hier mal ein Beispiel:
<html><head>
<style type="text/css">
input,span,body{font-size:110%}
p,div{padding:0px;margin:0px;}
input{width:204px;}
ul.instant{list-style-type:none;padding:0px;margin:0px;
width:200px;border:2px outset lightgrey;border-top:0px;
padding-bottom:10px; display:none; }
li{list-style-type:none;}
</style>
<script type="text/javascript">
var worte= new Array("Wissen","Wissenschaft","Wissenschaftler","Pappnase",
"Pappteller","Papyrus","Pappel");
var inEl='<li onclick="change(this.innerHTML)"' +
'onmouseover="this.style.backgroundColor=' + "'azure';" +
'this.style.cursor=' + "'pointer'" +
'" onmouseout="this.style.backgroundColor=' + "'white'" +'" >';
function check(was){
if(was.length > 2)
{
var elem=document.getElementById('instant');
elem.innerHTML="";
var pattern = "^"+was;
var re = new RegExp(pattern, "i");
for (var i=0; i < worte.length; i++)
{
if(re.test(worte[i]))
{
elem.innerHTML+= inEl + worte[i] + "</li>";
elem.style.display="block";
}
}
}
}
function change (das){
document.getElementById('in').value=das
document.getElementById('instant').innerHTML=""
document.getElementById('instant').style.display="none"
}
</script>
</head><body>
<p><input type="text" onkeyup="check(this.value)" id="in"></p>
<ul id="instant" class="instant"
onmouseout="this.style.display='none'"
onmouseover="this.style.display='block'">
</ul>
</body></html>
ab einer Länge von 3 Zeichen im Textfeld geht es los, es wird nur nach Wortanfang gesucht - also ab "wis" oder "pap" werden die Vorschläge angezeigt.
Danke für die schnelle Antwort und dein super Beispiel.
Kann ich mir die Wortliste jetzt mit Perl aus einer Datenbank holen?
Hierbei würde ich es bevorzugen, wenn ich nicht alles aus der Datenbank hole, was drin ist, sondern nur die bei denen die ersten 3 Buchstaben gleich sind.
Auf jeden Fall vielen Dank für das Beispiel.
Danke für die schnelle Antwort und dein super Beispiel.
Kann ich mir die Wortliste jetzt mit Perl aus einer Datenbank
holen?
Hierbei würde ich es bevorzugen, wenn ich nicht alles aus der
Datenbank hole, was drin ist, sondern nur die bei denen die
ersten 3 Buchstaben gleich sind.
das kannst Du ja machen, wie Du willst.
übergibst dem perlscript halt die 3 Zeichen des inputfeldes halt als Querystring.
wenn Du beim Ajax-Reguest async auf false stellst, dann kannst Du den response gleich mit javascript "bearbeiten", was nach meiner Ansicht, der einfachere Weg ist.
z.B.:
der response besteht aus den Begriffen, die mit Leerzeichen getrennt sind. Du splittst diese in ein Array und kannst dann ähnlich wie im Beispiel verfahren.