jQuery EasyTags Plugin

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.942 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:

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.942 hits)