Tagging system based on StackOverflows system
JavaScript PHP CSS
Switch branches/tags
Nothing to show
Latest commit e22f4e8 Oct 5, 2015 @adamtester Merge pull request #27 from orthographic-pedant/spell_check/because
Fix typographical error(s)
Failed to load latest commit information.
css CSSCombed Files Mar 27, 2014
.csscomb.json Use CSSComb to standardize the CSS Mar 27, 2014
.gitignore .gitignore to ignore build files, build system files and junk Windows… Mar 26, 2014
.travis.yml Setup TravisCI Integration Mar 27, 2014
Gruntfile.js updated build aliases Apr 6, 2014
README.md Fix typographical error(s) Oct 5, 2015
SOTag.php remove extra whitespace Mar 25, 2014
SO_Tag.jquery.json Added jquery json Sep 18, 2013
index.php Better docs, default tag support Sep 5, 2013
package.json dev-dependency package cleanup: not using all of the copy and pasted … Apr 6, 2014
result.php Almost perfect multi support and better example Aug 14, 2013


Build StatusBuilt with GruntjQuery.SO_Tag

Tagging system based on StackOverflows tags with descriptions.

I found myself in need of a tagging system, so I searched far and wide on the internet for a decent one, and I couldn't find one! The style I was going for was the tagging system used on StackOverflow (hence the name SOTag). And searching StackOverflow there are hundreds of questions asking for tagging systems like it!

So I created SOTag, a simple tagging system that only allows a set of tags hat are stored in a database.

First a little description about what this plugin is for. This plugin is designed to be used with a backend database full of tags, not to be able to tag whatever you or the user wants to. I may add that feature if people want to but you cannot currently let your users add custom tags using this plugin



Please note the sample data is taken directly off the StackOverflow website and remains their property.

Basic Example

It's easy to get started, first include the JavaScript files and the CSS

<link rel="stylesheet" type="text/css" href="css/so_tag.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/so_tag.js"></script>

And then assign sotag(). You'll notice the default tags are written like this: 24_tagname, this is because the tags are stored in the database and the first number is relative to the ID of that tag.

<input type="text" value="1_some, 2_example, 3_tags" id="basic_example" />
<script type="text/javascript">
	description : true

To actually get it to post to the server side just wrap it in a form and add a submit button!

<form action="result.php" method="post">
	<input type="text" value="3_php" name="single_example" id="single_example" />
	<input type="submit" value="Submit" />

<script type="text/javascript">
	description : true


SOTag is set up as a grunt project to automate build tasks (such as creating minified css/js files). It is not required but it will make your life easier if you use it. You need:

  • Node.js (It is quite easy to install)
  • Grunt - even easier to install: just enter this into your command line: npm install -g grunt-cli
  • Next you just have to (from the project dir) run npm install
  • Then run build task(s) as desired (with the command line syntax of grunt [buildtask])

The grunt tasks that are currently defined:

  • Normal usage:
    • build_release: release build, css/js in minified form only.
    • build_dev: dev build, css/js in original form only.
    • build_dual: dual mode build with both minified and original css/js.
    • default: runs both the build_dev and build_release tasks.
  • Cleanup:
    • clean_full: totally cleans the whole build folder.
    • clean_dev: cleans the dev build folder.
    • clean_dual: cleans the dual build folder.
    • clean_release: cleans the release build folder.
  • Extras (all of these are run if needed by the build tasks)
    • lint: runs all linting tasks.
    • prebuild: runs csscomb.
    • minify: minifies bother JavaScript and CSS files to .min


  • Load with options
  • Everything with SO_ prefix
  • Max Tags
  • Better styled close button

Bitdeli Badge