This articles has been requested to be deleted.
This articles has been flagged as inappropriate.
Sunday, November 16th 2008, 8:08pm
Tags
autocomplete,
polling,
script.aculo.us,
serverlast,
suggest
Abstract
Autocomplete unterstützt den Benutzer bei der Sucheingabe indem es Vorschläge liefert. Hier wird es mit Hilfe des Frameworks script.aculo.us gebaut.
Article
Die getippten Buchstaben des Suchwortes werden unmittelbar im Hintergrund zum Server übertragen, das jeweilige Ergebnis zurückgeschickt und "live" in die bestehende Seite eingefügt. Dieser Vorgang wiederholt sich bei jedem getippten Buchstaben. Der Service wurde besonders populär nachdem Google ihn lange in der Beta Phase hatte und inzwischen auf google.com produktiv einsetzt:
script.aculo.us ist eine JavaScript-Bibliothek, die auf dem JavaScript-Framework Prototype aufbaut. Sie bietet dynamische visuelle Effekte und GUI-Elemente über das Document Object Model (DOM).
Warum sollte man script.aculo.us den vielen anderen JavaScript Frameworks vorziehen? Das soll an dieser Stelle nicht diskutiert werden. Ich werde den Autocomplete Effekt mit mehreren Frameworks erklären.
Links:
Als Vorbereitung müsst ihr euch eine Grafik beschaffen. Ihr könnt die Grafik entweder mit GIMP, Photoshop & Co selbst erstellen oder aber den kostenlosen Webservice von
ajaxload.info nutzen. Ihr braucht für dieses Tutorial keine Kenntnisse aus dem HowTo
AJAX Ladegrafik, da script.aculo.us seine eigenen Helperfunktionen mitbringt um die Funktionalität einer Ladegrafik zu erzeugen.
script.aculo.us ist wie viele andere JavaScript Frameworks sehr "ID-bezogen". Ihr werdet feststellen, dass ihr die IDs der Container an anderen Stellen im JavaScript Code angebt.
|
HTML Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Autocomplete: script.aculo.us</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,controls" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2>Autocomplete: script.aculo.us</h2>
<form action="" method="post">
<div>
Suchen nach:
<input id="sourceInput" type="text" name="sourceInput" />
<img src="img/ajaxload.gif" alt="" id="loadingImg" />
<div id="destinationDiv" class="autocomplete"></div>
<input type="submit" value="Speichern" />
</div>
</form>
<script type="text/javascript">//<![CDATA[
new Ajax.Autocompleter('sourceInput','destinationDiv','search.php', {
indicator: 'loadingImg'
});
//]]></script>
</body>
</html>
|
Um die Serverlast zu verringern bietet script.aculo.us zwei Parameter. Der Parameter
frequency gibt die Zeitspanne in Sekunden an die mindestens zwischen zwei AJAX Anfragen vergehen muss.
minChars kann man erhöhen um zu erreichen, dass die AJAX Anfragen erst ab einer bestimmten Mindest-Zeichenlänge gesendet werden.
Die Parameter ändert man beim konstruieren des Autocompleters - die Standardwerte sind 0.4 und 1.
|
|
JavaScript Code
|
1
2
3
4
5
|
new Ajax.Autocompleter('sourceInput','destinationDiv','search.php', {
indicator: 'loadingImg',
frequency: 0.4,
minChars: 1
});
|
Das Backend muss einen normalen HTML Code ausgeben. am besten ist eine Darstellungsvariante unterhalb des Eingabeelements. Außerdem kann man die Liste scrollbar machen. Das erreicht man durch die Angabe einer festen Größe und der Eigenschaft overflow:auto.
Wenn ihr Hilfe zum Umgang mit dem PDO braucht, könnt ihr das im entsprechenden Tutorial nachlesen:
Einführung in PDO - generell könnt ihr aber auch jede andere Datenbankschnittstelle dazu benutzen.
|
|
PHP Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
require_once 'Configuration.php';
require_once 'MyDB.php';
$sql = "SELECT username,
job
FROM user
WHERE username LIKE :username
LIMIT 10";
$stmt = MyDB::getInstance()->prepare($sql);
$stmt->execute(array(
':username' => "%".$_REQUEST['sourceInput']."%",
));
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo '<ul style="overflow:auto;height:150px">';
foreach($result as $row) {
printf('<li><b>%s</b> %s</li>', $row['username'], $row['job']);
}
echo '</ul>';
?>
|
Ihr könnt den zusammengesetzten Code hier live ausprobieren:
http://demo.easy-coding.de/ajax/autocomp…cript.aculo.us/. Außerdem gibt es alle Dateien
zum kostenlosen Download%
