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
Hier eine beispielhafte PHP Datei.
Alles anzeigen
== Downloads ==
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
Hier eine beispielhafte PHP Datei.
Quellcode
- <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>
== Downloads ==
52.739 mal gelesen