Das jQuery EasyTags Plugin ist ein kleines, nützliches Script, mit dem man schnell und einfach Tags eingeben & sortieren kann. Das Plugin kommt mit Livesearch und Drag&Drop Funktionalität!
Demo
Download
EasyTags 1.0 (5,0 KiB, 1.913 hits)
Funktionalitäten
- Tags können via “,” oder “enter” eingetragen werden
- Doppelte Tags werden automatisch ignoriert und sind nicht möglich
- Leere Tags sind nicht möglich
- Entfernen der Tags mittels schließen Link (x)
- Drag & Drop (optional) zum sortieren der Tags (Values der tags werden auch mitsortiert)
- Livesearch Funktionalität zum einfachen suchen von tags
- 5kb klein bzw. 3kb packed
HTML
Im HTML muss lediglich eine Zeile definiert werden:
<div id="my_tags"></div>
Javascripts
Im Javascript Teil muss zuerst das easytags plugin aufgerufen werden, danach (optional) das drag&drop plugin.
<script type="text/javascript"> $().ready(function() { $("#my_tags").easytags(); //easytags plugin $("#my_tags #tags ul").dragsort({dragEnd: function() {$.easytags.reorder_tags();}}); //for drag&drop support }); </script>
Plugin Options
Beim Plugin Aufruf können noch folgende Optionen definiert werden:
Option Name | Default | Description |
---|---|---|
starttags | “” | Tags visible on start: tag1,tag2,tag3 |
movetext | “move this tag” | Title Text visible on drag |
removetext | “remove this tag” | Title Text for the tag-close link |
tagsearchtype | “GET” | Ajax Live Search Type “GET” or “POST” |
tagsearchpath | “ajax.php” | Path to your livesearch php file |
fieldname | “all_tags” | Name of the Input Field where all Tag Values are saved |
Example:
$("#my_tags").easytags({starttags:"kollermedia, jquery, tags", fieldname:"all_tags"});
Plugin – HTML Structure
Das Plugin erzeugt folgende HTML Struktur, die dann natürlich via CSS beliebig optisch angepasst werden kann.
<div id="my_tags"> <input style="display: none;" name="all_tags" value="" type="text" id="all_tags" /> <div id="tags"> <ul><li>tag example</li><li>tag example2</li></ul> <input type="text" id="tag_new" /> </div> <div id="tagsearch"> </div> </div>
Livesearch PHP Example Code
Wieviele Tags bei der Livesuche ausgegeben werden sollen, kann via PHP bzw. der MySQL Abfrage beliebig angegeben werden. Hier ein Beispielcode für das PHP File:
$searchtag = $_GET["searchtag"]; //Get the search string //Database Connection $dbconnect = mysql_connect(localhost,"db_username","db_password") or die ("keine Verbindung möglich. Benutzername oder Passwort sind falsch"); mysql_select_db("db_name") or die ("Die Datenbank existiert nicht."); //search in Database and output the result $query = "SELECT tag FROM tablename WHERE tag LIKE '%$searchtag%' LIMIT 10"; $result = mysql_query($query); while($row = mysql_fetch_object($result)) { echo " <a href=\"#\">".$row->tag."</a>"; }
Works with…
- IE 8
- Firefox
- Safari
- Chrome
- Opera
Download
EasyTags 1.0 (5,0 KiB, 1.913 hits)
JudGer schreibt:
Hey, das Plugin sieht wirklich interessant aus, leider funktioniert der Download nicht 🙁 Beim Entpacken des Archivs bekomme ich einen CRC-Fehler, egal ob unter Windows oder Linux.
LG
Jürgen Koller schreibt:
Hi,
hab die Files nochmal neu hoch geladen aber beim download sind sie dann wieder defekt. Weiß noch nicht genau woran das liegt 🙁 Seltsame Sache.
Jürgen Koller schreibt:
Das LiveDemo funktioniert auf jeden Fall jetzt wieder richtig.
Jürgen Koller schreibt:
Download File sollte nun auch wieder funktionieren.
Mischa schreibt:
Hi Jürgen
Tolles Script, ist meiner Meinung nach das beste Tag-Script für jQuery dass es gibt!
Mir ist aber aufgefallen, dass das Script sowohl bei mir als auch in deiner Live-Demo doppelte Tags annimmt. Außerdem ist dieser schon Farbeffekt beim ziehen der Tags nur beim ersten da (im Firefox 4.0).
Hast du einen Tipp für mich, wie ich das ändern kann? Danke!
Mischa
Andre schreibt:
Hey Jürgen – wirklich gutes Plugin. Denke auch das es zu den besseren Tag Plugins gehört 🙂
Mir ist allerdings ein “fehler” aufgefallen.
und zwar nutzt du beim deleten der tags ein hash was dazu führt das der browser an den seiten anfang springt wenn das tag feld im unteren bereich einer seite ist. Man könnte das ja auch hervorragend ohne hash lösen 🙂
Ansonsten, gute arbeit, danke dafür 😉
Roberto schreibt:
Hallo Jürgen,
kann man das ajax deaktivieren? Ich brauch keinen Callback zu einer php Datei… der User soll nur die Tags eingeben können. Danke. (sehr schönes Plugin, Danke!) Robert.