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

Check out the live 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">&nbsp;</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)

  1. 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

  2. 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

  3. 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 😉

  4. 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.

Sag mir was du denkst

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>