Googlelike Inputoptions[gelöst]

  • Themenstarter Themenstarter sw33tlull4by
  • Beginndatum Beginndatum
S

sw33tlull4by

Guest
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


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.
 
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.
 
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.
 
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.
Zum Vergrößern anklicken....

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!
 
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: 
<html>
<head>
	<title>Implement the autocompleteplugin</title>
	
	<link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css">
	<link rel="stylesheet" type="text/css" href="jquery-autocomplete/lib/thickbox.css">
	<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
	<script type='text/javascript' src='jquery-autocomplete/lib/jquery.bgiframe.min.js'></script>

	<script type='text/javascript' src='jquery-autocomplete/lib/jquery.ajaxQueue.js'></script>
	<script type='text/javascript' src='jquery-autocomplete/lib/thickbox-compressed.js'></script>
	<script type='text/javascript' src='jquery-autocomplete/jquery.autocomplete.js'></script>

	<script language="JavaScript" type="text/javascript">
	
		$(document).ready(function(){			
			var data ="this is just another of the stupid example.".split(" ");
			$("#example").autocomplete(data,
			{
				width: 260,
				selectFirst: false
			});
		})		
	</script>
</head>
<body>
<form autocomplete="off">
	<p>

		<label>test:</label><input id="example">
	</p>
	
</form>
</body>
</html>
 
Das problem was ich hatte was einfach nur das Ajax, mehr ein Werbebegriff ist und das sehr viel Ajax genannt wird.
Zum Vergrößern anklicken....

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.
 
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.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben