This articles has been requested to be deleted.
Saturday, October 8th 2011, 1:28pm
Tags
autocomplete,
autovervollständigung,
jQuery
Abstract
Beim Autocomplete werden Eingaben innerhalb eines Eingabefeldes automatisch durch Suchtreffer ergänzt.
Article
jQuery ist ein kompakte JavaScript Library, die zwar im Vergleich zu Scriptaculous nicht so viele Effekte mitbringt, dafür aber auch nur einen Bruchteil des Quellcodes erfordert.
Die Besucher werden also mit schnelleren Ladezeiten belohnt.
Die erforderlichen JavaScript Dateien beziehen sie am Besten über die Homepage des Projektes oder über die Links weiter unten.
Die Suchanfrage wird in unserem Beispiel mit dem Parameter "q" an die Datei suche.php geschickt.
Die Ausgabe der suche.php hat folgendermaßen auszusehen
|
Source code
|
1
2
3
|
suchwort|zusatzinfos
suchwort|zusatzinfos
...
|
Hier eine beispielhafte PHP Datei.
|
|
PHP Quellcode
|
1
2
3
4
5
6
|
<?php
$res = mysql_query("SELECT * FROM table WHERE spalte LIKE '%".$_GET['q']."%' ");
while($row=mysql_fetch_object($res)) {
echo $row->spalte.'|'.$row->spalte2."\n";
}
?>
|
|
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<html>
<head><title>AutoComplete mit jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<style type="text/css">
.ac_input {
width: 200px;
}
.ac_results {
width: 200px;
background: #eee;
cursor: pointer;
position: absolute;
left: 0;
font-size: 90%;
z-index: 101;
}
.ac_results ul {
width: 200px;
list-style: none;
padding: 0px;
margin: 0px;
border: 1px solid #000;
}
.ac_results li {
width: 190px;
padding: 2px 5px;
}
.ac_results a {
width: 100%;
}
/* thanks udoline: this fixed position error into msie */
.ac_results iframe {
width: 200px;
position: absolute;
}
.ac_loading {
background : url('/indicator.gif') right center no-repeat;
}
.over {
background: yellow;
}
</style></head>
<body>
<p><input id="autocomplete" type='text'></p>
<script type="text/javascript">
function selectItem(li) {
return false;
}
function formatItem(row) {
return row[0] + "<br><i>" + row[1] + "</i>";
}
$(document).ready(function() {
$("#autocomplete").autocomplete("search.php", {
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
formatItem:formatItem,
selectOnly:1
});
});
</script>
</div>
</body>
</html>
|
report critical content
