Instant-Formular Website

Internet
#1

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

#2

Bitte genauer definieren und ggf. ein Beispiel geben. Ich versteh nicht was Du willst. Autovervollständigen von Text oder was?!

#3

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??

#4

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.

#5

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 :wink:

Liebe Grüße,
-Efchen

#6

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:


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;}

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“
}


    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.

    #7

    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.

    #8

    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.

    #9

    Oder kann man die Datenbank auch gleich mit Javascript auslesen?
    Vielleicht sollte ich mal anfangen Javascript zu lernen …

    #10

    Oder kann man die Datenbank auch gleich mit Javascript
    auslesen?

    vom Script im Client: Nein

    Vielleicht sollte ich mal anfangen Javascript zu lernen …

    Ja unbedingt!!

    #11

    Vielleicht sollte ich mal anfangen Javascript zu lernen …

    Ja unbedingt!!

    okay

    Also muss ich das irgendwie mit Perl machen.
    Wie mache ich das mit dem :
    var worte= new Array(„Wissen“,„Wissenschaft“,„Wissenschaftler“,„Pappnase“,
    „Pappteller“,„Papyrus“,„Pappel“);

    denn in Perl?

    also ich möchte ja mit Perl die Datenbank auslesen:
    my $sql = qq{select words from instant};
    my $sth = $dbh->prepare( $sql );
    $sth->execute();

    while (@words=$sth->fetchrow_array)
    {
    @words = var worte; ???
    }

    #12

    @words = var worte; ???

    ich meine hier natürlich var worte = @words und nicht andersherum. :wink:

    #13

    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.

    #14

    Ich habe gerade das Problem, dass ich eine while-Schleife habe (Perl), wenn ich die Datenbank auslese.
    Jetzt möchte ich ja die Wörter die in der Datenbank stehen in diese var worte schreiben.

    #15

    ich meine hier natürlich var worte = @words und nicht
    andersherum. :wink:

    perlscript schickt z.b.:
    wort1 wort2 wort3

    dann so:
    var worte = req.responseText.split(" ");

    #16

    var worte = req.responseText.split(" ");

    ich bin gerade etwas überfragt, wie gesagt Javascript ist nicht mein Ding.
    Wäre nett, wenn du mir diese Zeile einmal erklären würdest.
    Wofür steht zum Beipiel Text? in responseText.
    Bei Spilt ist doch gemeint, wo ich meine Wörter splitte oder?
    Also immer beim Leerzeichen.

    #17

    Ich habe gerade das Problem, dass ich eine while-Schleife
    habe (Perl), wenn ich die Datenbank auslese.

    Jetzt möchte ich ja die Wörter die in der Datenbank stehen in
    diese var worte schreiben.

    das geht nicht so direkt.
    wenn Du das Array im perlscript schreiben willst … und auch anderere code, dann wird das mit eval(response.Text) übernommen.

    aber die andere lösung finde ich besser :smile:)

    #18

    Ich habe jetzt.
    $words = „“;

    my $sql = qq{select words from instant};
    my $sth = $dbh->prepare( $sql );
    $sth->execute();

    while (@words=$sth->fetchrow_array)
    {
    $words = $words." ".$words[0];
    }

    print „\n“;
    print „var worte = req.responseText.split(“ „);\n“;

    Ich hoffe das ist jetzt nicht komplett falsch. :wink:

    #19

    var worte = req.responseText.split(" ");

    ich bin gerade etwas überfragt, wie gesagt Javascript ist
    nicht mein Ding.
    Wofür steht zum Beipiel Text? in responseText.

    Du erzeugst ja ein neues XMLHttpRequest-Object, hier req genannt:


     if (window.XMLHttpRequest) { req=new XMLHttpRequest()}
     else { req=new ActiveXObject(„Microsoft.XMLHTTP“) }

    im req.responseText ist das enthalten, was geschickt wird.
    bei async false direkt bearbeitbar, bei true brauchst Du eine callback-function

    Bei Spilt ist doch gemeint, wo ich meine Wörter splitte oder?

    Du splittest einen String in ein Array.
    Nur andere Syntax als beim perligen split.

    #20

    Du erzeugst ja ein neues XMLHttpRequest-Object, hier req
    genannt:

    Wieso erzeuge ich mit meiner Datenbankabfrage im selben Script ein neues XMLHttpRequest-Object?

    bei async false direkt bearbeitbar, bei true brauchst Du eine
    callback-function

    Was genau meinst du hiermit?