AJAX Autocomplete: Vorschläge direkt im Skript

Beginner

Saturday, November 21st 2009, 2:02pm

AJAX Autocomplete: Vorschläge direkt im Skript

Hallo zusammen

Ich bin daran mit ein etwas aussergewöhnliches Autoskript zu basteln. Als Vorschlag soll nur 1 festgelegter Wert angezeigt werden. An den Wert komme ich aber nur auf der aktuellen Seite.

JavaScript Code

1
2
3

<script type="text/javascript">
 new Ajax.Autocompleter('email', 'auto1', 'emailnachschlagen.php', {});
</script>

Das heisst, dort wo der Link zur PHP Datei ist, würde ich gerne direkt meine Vorschläge reinschreiben.

Ist das irgendwie realisierbar?

Vielen Dank

Gruss
molex

This post has been edited 1 times, last edit by "molex" (Nov 21st 2009, 3:08pm)

Torben Brodt

Administrator

Posts: 8,454

Saturday, November 21st 2009, 2:40pm

Quoted from "molex"

Als Vorschlag soll nur 1 festgelegter Wert angezeigt werden.

Mir ist leider noch nicht klar, was du vorhast? Du willst einen "festgeleten Vorschlag" anzeigen?
Was hat das mit AutoComplete zu tun? Brauchst du überhaupt ein Eingabefeld?
Du meinst "nur auf der aktuellen Seite" - brauchst du überhaupt AJAX?

Was ist der Unterschied zum ganz normalen Textlink? ;)

Lg

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

molex

Beginner

Posts: 9

Saturday, November 21st 2009, 3:05pm

Ist etwas kompliziert zu erklären.

Also, ich möchte beim Autocomplete bei jedem User sein Email Adresse hinterlegen.

Also wenn seine E-Mail Adresse: test@test.test ist, und er "t" tippt, kommt automatisch test@test.test.

Es hat aber schon einen Sinn, warum ich das nicht direkt reinschreibe

Wichtig ist halt eben, dass ich der Vorschlag, also die Mail adresse, direkt im Skript festlegen kann.

Torben Brodt

Administrator

Posts: 8,454

Saturday, November 21st 2009, 3:15pm

Also ein normaler Autocomplete erweitert um einen Default Vorschlag.

Naja, dann liefere die Daten doch zusätzlich per GET Parameter mit, wenn sie Seiten bezogen sind - oder Frage sie aus der Session ab, wenn sie Userbezogen sind.

Die Get Lösung:

	JavaScript Code
1	new Ajax.Autocompleter('email', 'auto1', 'emailnachschlagen.php?default=test@test.test', {});

Dein serverseitiges Script, musst du dann natürlich noch um den GET Parameter erweitern.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

molex

Beginner

Posts: 9

Saturday, November 21st 2009, 5:52pm

Hiho

Irgendwie will das nicht ganz

Die Seite auf der das AJAX Skript ausgeführt wird, heisst. index.php?id=1. Das Ajax Skript funktioniert nur, wenn ich anstatt index.php?id=1 "test.php" nehme und darin eine ganz normal Aufzählung mache.

Quoted

Dein serverseitiges Script, musst du dann natürlich noch um den GET Parameter erweitern.

Was meinst du damit?

Vielen Dank

Dominic

Intermediate

Posts: 108

Sunday, November 22nd 2009, 12:45am

Hey,

würde es dir reichen, wenn du die Email fest in die Seite schreibst (angepast zum user)?

Sprich:

PHP Quellcode

<?php
  print "<html>dein ganzer htmlschrott";
  print "<script ...javascript>";
  print "var email = '" . $current_user_email . "'";
?>

Und mit onkeyup="deinefunktion()" kannst du dann bei dem Textfeld eine Funktion aufrufen, die den ersten Buchstaben mit deiner variable email in JS vergleicht. Komplett ohne AJAX und somit weitaus schneller (die email vom user ändert sich ja nicht einfach so...)

Gruß,
Nick

Latest blogs: Bloggen...

molex

Beginner

Posts: 9

Monday, November 23rd 2009, 8:39am

Hiho zusammen

Konnte es schlussendlich so lösen:

HTML Code

1
2

<script src="{@RELATIVE_WCF_DIR}js/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="{@RELATIVE_WCF_DIR}js/scriptaculous/scriptaculous.js" type="text/javascript"></script>

Cascading Style Sheets

<style type="text/css">
	div.autocomplete {
		border:1px solid #888;
		margin:0;
		padding:0;
		font-size: 0.85em;
	}
	div.autocomplete ul {
		list-style-type:none;
		margin:0;
		padding:0;
	}
	div.autocomplete ul li.selected {
		background-color: #ffd;
	}
	div.autocomplete ul li {
		list-style-type:none;
		margin:0;
		padding:2px;
		cursor:pointer;
	}
</style>

JavaScript Code

<script type="text/javascript">
//<![CDATA[
var destination = ['test@test.test',];
new Autocompleter.Local('email','destination',destination, {
	frequency: 0.1,
	indicator: "loadingImg"
});
//]]>
</script>

Nun habe ich nur noch 1 Darstellungsproblem. Das Div das mir ja als Auswahl unterhalb des input Feldes angezeigt wird, ist ca. 4px länger als das Input Feldes. Anbei ein Bild:

Ich habe es mit allen möglichen CSS Befehlen versucht, aber schlussendlich wirkte nix.

Ich weiss es ist nur eine Kleinigkeit, aber mir springt es irgendwie sofort ins Auge.

Ansonsten, vielen Dank für die Hilfe

molex has attached the following image:

Gnah

Intermediate

Posts: 69

Monday, November 23rd 2009, 3:17pm

Schonmal versucht eine feste Größe zu definieren?

molex

Beginner

Posts: 9

Monday, November 23rd 2009, 3:38pm

Hiho

Also ich hatte zum testen mal folgendes probiert:

Cascading Style Sheets

div.autocomplete {
	width:10px;
	border:1px solid #888;
	margin:0;
	padding:0;
	font-size:0.85em;
}

Ergebnis ist immer noch dasselbe

Torben Brodt

Administrator

Posts: 8,454

Monday, November 23rd 2009, 9:47pm

ach du nutzt das WCF Framework. Sag das doch...

zu deinem CSS Problem. Ohne Beispielseite kann man das Problem schlecht analysieren, aber wenn es nicht die Breite ist, wird es ein Abstand sein.
Entferne jene doch mal versuchsweise bei allen Unterelementen

	Cascading Style Sheets
1 2 3 4	div.autocomplete, div.autocomplete * { padding:0px; margin:0px; }

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

molex

Beginner

Posts: 9

Tuesday, November 24th 2009, 7:27am

Hiho

Ich sah gerade, dass er mir aus meinem div, in welchem er dann den Vorschlag anzeigt im Browser folgendes macht:

HTML Code

1
2

<div id="destination" class="autocomplete" style="width: 756px; position: absolute; left: 356px; top: 439px; display: none;">
</div>

Ich denke der Auslöser werden die 756px bei der Länge sein. Ich habe keine Ahnung woher er dieses CSS zieht. Im Editor sieht das div so aus:

	HTML Code
1	<div id="destination" class="autocomplete"></div>

Irgendwie schräg

Die Seite findet ihr hier:

http://www.asperger-forum.ch/forum/index.php?form=Contact

Ich habe dem E-Mail Feld als Vorschlag die Adresse: test@test.test hinterlegt.

Viele Dank

Torben Brodt

Administrator

Posts: 8,454

Tuesday, November 24th 2009, 9:00am

Ich schätze, das ist der AutoComplete in Protoculous, der die offset breite setzt, dabei aber nicht die border links und rechts berücksichtigt.
Die Breite auf 100% setzen funktioniert leider auch nicht. Wenn du die Breite auf "auto" setzt, überschreibt das Framework diese Breite evtl nicht.

Wenn du die 2px fixen willst, musst du das entweder im Protoculous Kern (nicht zu empfehlen), oder indem du eine Callback Methode schreibst, du die offset Breite im nachhinein korrigiert.

Ich habe mir den minified Code des Protoculous nicht angeschaut. Aber ich schätze der Aufwand lohnt sich nicht.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung