[HaBo]

sw33tlull4by · 31.08.09, 14:49

Hallo!
Ich habe mir gedacht ich schreibe in JavaScript mal die Art und weise wie Google einem Eingabevervollständigungen anbietet.

Ich habe dann erstmal angefangen mit einem Select-Button zu experimentieren.
Dann habe ich mir gedacht, ok, baust du unter dem Eingabefelt eine Textarea ein, und wenn du dann die Pfeiltasten drückst aenderst du den Focus und übergibst diesen dann an das Textfeld was du dann sichtbar machst.
Allerdings habe ich ein Problem, und zwar:
Wie kann ich in einer <textarea> eine Zeile seperat ansteuern, sprich:
farblich unterlegen um Auswahl anzuzeigen und anschliessen den Wert auslesen?

Anbei mein Code.
Leider finde ich zu dem von mir gewünschten Thema nix.
Falls google das anders macht, oder ihr Vorschäge habt, bitte mitteilen.
Klar kann man das auch mit einer XMLHTMLREQUEST ergänzen aber es ist nicht mein vornehmliches Ziel und soll ja nur ein sehr sehr simples Beispiel sein.
Danke im vorraus.
Mfg

sw33t

JS-CODE

//edit
Also das hat mit meinem Text folgendes zu tun.
Ich will diesen Effekt in der Textarea einbauen, die Selecttags komplett rausnehmen, und dann
beim finden focus auf die Textarea und anschliessend mittels onKeydown-event will ich dem User die moeglichkeit der Auswahl geben.

metax. · 31.08.09, 16:37

Eine vernünftig funktionierende und intuitive Speed-Typing-Funktion für so ein Suchfeld lässt sich nicht wirklich gut aus Standard-HTML-Elementen mit wenig Javascript zusammenbauen.
Such dir ein Javascript-Toolkit (z.B. jQuery, Mootools) oder schreib das ganze gleich mit Java (und exportiere es mit dem Google Web Toolkit nach Javascript).
Dann kannst du auch das Interface gleich gescheit zusammenbauen und das ganze Event-Management läuft mit so einem Toolkit doch bedeutend einfacher.
Das einzig schwierige am Speed-Typing ist es, die Liste der vorgeschlagenen Wörter zu generieren.
Am besten erzeugst du aus deinem zu durchsuchenden Content ein Wörterbuch (sortiert nach oft vorkommenden Wörtern). Wenn du nicht zu viel Content hast, reicht es, bei einer Änderung im Suchfeld (am besten mit einer kleinen Latenz, damit du beim Tippen nicht mehrere Suchen auslöst) per AJAX den Suchbegriff auf den Server schickst, ihn dort mit dem Wörterbuch matchst (z.B. Substring), und die10 besten Ergebnisse zurücklieferst. Natürlich solltest du dir ein gutes Ranking-Verfahren überlegen, damit du nicht nur Schrott in den Vorschlägen stehen hast.

Das Interface auf der Client-Seite sollte sich nur aufklappen, wenn es Suchvorschläge gibt, und sollte sich auch so verhalten, wie eine aufgeklappte Comco-Box. D.h.: Navigation mit Pfeiltasten in der Suchliste, Auswählen von Vorschlägen mit Enter oder Mausklick (und dabei evtl. schon Abschicken der Maske). Die Liste sollte auch verschwinden, wenn man irgendwo sonst auf die Maske klickt, etc.

Wie gesagt, das schwierigste dürfte das generieren der Ergebnisse sein, da diese sehr schnell zurückgeliefert werden müssen (Benutzer sind bei sowas ungeduldig).

mfg, metax.

HaBo Ads

sw33tlull4by · 01.09.09, 22:59

Vielen dank.
Ich habe mich nach etwas auseinandersetzung für JQuery entschieden.
Nun habe ich aber noch eine Sache:
Ich würde trotzdem gerne wissen wie ich in einer Textarea eine einzelne Zeile auswähle(jetzt ohne API), könnte mir ja evtl später nuetzlich sein.Ich gehe aber mal davon aus das ich mir da selbst was schreiben muss, wäre super wenn man mir links zu dem Thema geben könnte.

03.09.09, 20:56

Zitat:

Original von sw33tlull4by

1.Ich würde trotzdem gerne wissen wie ich in einer Textarea eine einzelne Zeile auswähle(jetzt ohne API), könnte mir ja evtl später nuetzlich sein.Ich gehe aber mal davon aus das ich mir da selbst was schreiben muss, wäre super wenn man mir links zu dem Thema geben könnte.

Hallo sw33tlull4by,

afaik findet man solche Sachen unter der Überschrift ajax. Die google Geschichte (Markierungen) bekommt man mit css styles und divs denke relativ einfach hin!

sw33tlull4by · 04.09.09, 09:05

Vielen dank für den tipp friday.

Ich habe es mittlerweile hinbekommen.
Ich habe das Autocompleteplugin für jquery benututz.
Hier ist mein Code und danke nochmalfür die hilfe.

CODE

BasicAvid · 04.09.09, 13:45

Zitat:

Das problem was ich hatte was einfach nur das Ajax, mehr ein Werbebegriff ist und das sehr viel Ajax genannt wird.

Naja, also Ajax ist definitiv kein Werbebegriff, sondern eine Technik. Ajax steht für Asynchronous JavaScript and XML und ist nur dafür dar, einen Request in einer HTML-Seite abzuschicken ohne einen Reload der kompletten Seite. Der Response wird dann mit Javascript verarbeitet.

Techniken wie Drag&Drop oder dieses AutoComplete sind nichts anderes wie DHTML Geschichten und werden sehr oft als Web2.0 oder Web3.0 verkauft.

sw33tlull4by · 04.09.09, 15:41

Das ist mir schon klar, was ich damit ausdruecken wollte ist der Umstand, das AJAX, defacto nichts eigenständiges ist,sondern das es sich hierbei wie der Name schon sagt nur um ein asynchrones zusammenspiel von Javascript und einem Backend mittels XML handelt.

//edit
aber ja hast recht, meine 2 zeile war so ziemlich kompletter Müll den ich geschrieben habe.

Empfehlung

31.08.09, 14:49	#1 (permalink)
sw33tlull4by Senior Member Registriert seit: 12.06.07 Likes: 0	Googlelike Inputoptions[gelöst] Hallo! Ich habe mir gedacht ich schreibe in JavaScript mal die Art und weise wie Google einem Eingabevervollständigungen anbietet. Ich habe dann erstmal angefangen mit einem Select-Button zu experimentieren. Dann habe ich mir gedacht, ok, baust du unter dem Eingabefelt eine Textarea ein, und wenn du dann die Pfeiltasten drückst aenderst du den Focus und übergibst diesen dann an das Textfeld was du dann sichtbar machst. Allerdings habe ich ein Problem, und zwar: Wie kann ich in einer <textarea> eine Zeile seperat ansteuern, sprich: farblich unterlegen um Auswahl anzuzeigen und anschliessen den Wert auslesen? Anbei mein Code. Leider finde ich zu dem von mir gewünschten Thema nix. Falls google das anders macht, oder ihr Vorschäge habt, bitte mitteilen. Klar kann man das auch mit einer XMLHTMLREQUEST ergänzen aber es ist nicht mein vornehmliches Ziel und soll ja nur ein sehr sehr simples Beispiel sein. Danke im vorraus. Mfg sw33t JS-CODE Code: <html> <head> <title>Inputoptions</title> <script language="JavaScript" type="text/javaScript"> function whatsnew(){ var eingabe = document.getElementById("notrelevant"); var optionarray = new Array("option1","nochwas","nochwie","nochne","option"); var possible = "<select id='option'>"; if(eingabe.value.length>0) for(var i = 0; i < optionarray.length;i++) { if(optionarray[i].indexOf(eingabe.value)==0) { possible += "<option>"+optionarray[i]+"</option>"; } } document.getElementById("output").innerHTML =possible +"</select>"; document.getElementById("output").style.visibility="visible"; setTimeout("hide_again()",5000); } function check_key(e){ var keyid = e.which; if(keyid == 40) //pfeiltaste nach unten { document.getElementById("option").focus(); } else whatsnew(); } function hide_again(){ document.getElementById("output").style.visibility="hidden"; } function selecting(e){ } </script> </head> <body> eingabe:<br> <div id="aligning_the_elements" style="margin-top:10%;margin-left:20%;"> <input type="text" id="notrelevant" onkeyup="check_key(event);" ><br> <div id="output" style="visibility:hidden;background-color:red;width:20%"></div> <textarea id="area" style="height:8em;width:26em;" onkeydown="selecting(event);"> Hier ist ein test und hier noch einer und das hier soll auch genau wie das hier seperat auswaehlbar sein </textarea> </div> </body> </html> //edit Also das hat mit meinem Text folgendes zu tun. Ich will diesen Effekt in der Textarea einbauen, die Selecttags komplett rausnehmen, und dann beim finden focus auf die Textarea und anschliessend mittels onKeydown-event will ich dem User die moeglichkeit der Auswahl geben. __________________ Nur die Schwachen klammern sich an die Moral. Kill my daemons and my angels will follow them.

31.08.09, 16:37	#2 (permalink)
metax. Registriert seit: 22.01.07 Likes: 10	Eine vernünftig funktionierende und intuitive Speed-Typing-Funktion für so ein Suchfeld lässt sich nicht wirklich gut aus Standard-HTML-Elementen mit wenig Javascript zusammenbauen. Such dir ein Javascript-Toolkit (z.B. jQuery, Mootools) oder schreib das ganze gleich mit Java (und exportiere es mit dem Google Web Toolkit nach Javascript). Dann kannst du auch das Interface gleich gescheit zusammenbauen und das ganze Event-Management läuft mit so einem Toolkit doch bedeutend einfacher. Das einzig schwierige am Speed-Typing ist es, die Liste der vorgeschlagenen Wörter zu generieren. Am besten erzeugst du aus deinem zu durchsuchenden Content ein Wörterbuch (sortiert nach oft vorkommenden Wörtern). Wenn du nicht zu viel Content hast, reicht es, bei einer Änderung im Suchfeld (am besten mit einer kleinen Latenz, damit du beim Tippen nicht mehrere Suchen auslöst) per AJAX den Suchbegriff auf den Server schickst, ihn dort mit dem Wörterbuch matchst (z.B. Substring), und die10 besten Ergebnisse zurücklieferst. Natürlich solltest du dir ein gutes Ranking-Verfahren überlegen, damit du nicht nur Schrott in den Vorschlägen stehen hast. Das Interface auf der Client-Seite sollte sich nur aufklappen, wenn es Suchvorschläge gibt, und sollte sich auch so verhalten, wie eine aufgeklappte Comco-Box. D.h.: Navigation mit Pfeiltasten in der Suchliste, Auswählen von Vorschlägen mit Enter oder Mausklick (und dabei evtl. schon Abschicken der Maske). Die Liste sollte auch verschwinden, wenn man irgendwo sonst auf die Maske klickt, etc. Wie gesagt, das schwierigste dürfte das generieren der Ergebnisse sein, da diese sehr schnell zurückgeliefert werden müssen (Benutzer sind bei sowas ungeduldig). mfg, metax. __________________ Wenn keiner zuschaut, teile ich heimlich durch Null! Meine Homepage: Planet Metax \| meine Bilder: DeviantArt \| Twitter

01.09.09, 22:59	#3 (permalink)
sw33tlull4by Senior Member Themenstarter Registriert seit: 12.06.07 Likes: 0	Vielen dank. Ich habe mich nach etwas auseinandersetzung für JQuery entschieden. Nun habe ich aber noch eine Sache: Ich würde trotzdem gerne wissen wie ich in einer Textarea eine einzelne Zeile auswähle(jetzt ohne API), könnte mir ja evtl später nuetzlich sein.Ich gehe aber mal davon aus das ich mir da selbst was schreiben muss, wäre super wenn man mir links zu dem Thema geben könnte. __________________ Nur die Schwachen klammern sich an die Moral. Kill my daemons and my angels will follow them.

04.09.09, 15:41	#7 (permalink)
sw33tlull4by Senior Member Themenstarter Registriert seit: 12.06.07 Likes: 0	Das ist mir schon klar, was ich damit ausdruecken wollte ist der Umstand, das AJAX, defacto nichts eigenständiges ist,sondern das es sich hierbei wie der Name schon sagt nur um ein asynchrones zusammenspiel von Javascript und einem Backend mittels XML handelt. //edit aber ja hast recht, meine 2 zeile war so ziemlich kompletter Müll den ich geschrieben habe. __________________ Nur die Schwachen klammern sich an die Moral. Kill my daemons and my angels will follow them.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[gelöst] Dhcp	buli_75	Network · LAN, WAN, Firewalls	17	06.10.07 19:28
[gelöst] wbemess log	Biervampir	Windows	4	16.04.07 21:09
gelöst	k00ky	Cryptography & Encryption	5	01.07.06 12:02
d lan [gelöst]	[starfoxx]	Network · LAN, WAN, Firewalls	7	19.06.06 21:06
Grafikkartenlüftersteuerung [gelöst]	Diabeles	Linux/UNIX	6	09.02.06 17:27


HaBo Ads HaBOT

[HaBo]

Googlelike Inputoptions[gelöst]