JSFiddle - React, Tailwind, and code Playground

by bluetidepro

HTML

<script src="https://raw.github.com/ioncache/Tag-Handler/master/js/jquery.taghandler.js"></script>
<link rel="stylesheet" href="http://ioncache.github.com/Tag-Handler/css/cupertino/jquery-ui-1.8.2.custom.css">
<ul id="ajax_no_initial_tag_handler"></ul>



<strong></strong>

CSS

body{margin:10px;}

.tagHandler {
    width: 100%;
    position: relative;
}
.tagHandler ul.tagHandlerContainer {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #DFDFDF;
    overflow: hidden;
    min-height: 30px;
    line-height: 30px;
    cursor: text;
    font-family: arial, helvetica, sans-serif;
    padding: 0px 5px;
    margin: 10px 0px;
}
.tagHandler ul.tagHandlerContainer li {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    height: 14px;
    line-height: 14px;
    display: block;
    float: left;
    font-size: 12px;
    margin: 5px 5px 5px 0;
    white-space: nowrap;
}
.tagHandler ul.tagHandlerContainer li.tagItem {
    background-color: #0066bd;
    color: #FFF;
    padding: 3px 8px;
    cursor: url('http://ioncache.github.com/Tag-Handler/images/tag_remove.cur'), pointer;
}
.tagHandler ul.tagHandlerContainer li.tagItem:hover {
    background-color: #008afb;
}
.tagHandler ul.tagHandlerContainer li.tagInput {
    padding: 3px 4px;
}
.tagHandler ul.tagHandlerContainer input.tagInputField {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    width: inherit;
    background-color: #FFF;
    color: #666;
    font-size: 12px;
}

JavaScript

$(document).ready(function() {


    $("#ajax_no_initial_tag_handler").tagHandler({
        autocomplete: true,
        allowAdd: false,
        sortTags: false,
        msgNoNewTag: 'You don\'t have permission to create a new tag...',
        availableTags: ["action", "album", "android", "app", "apparel", "black", "blackberry", "blog", "blue", "book", "children", "clothes", "colorful", "comedy", "comic", "css", "css3", "dark", "design", "development", "downloadable", "drama", "ebook", "event", "free", "freebie", "game", "green", "hat", "horror", "html", "icon", "icon set", "iPhone", "jersey", "light", "map", "match", "mobile", "movie", "online", "orange", "other", "pants", "php", "pink", "product", "psd", "purple", "red", "ruby", "sale", "sci-fi", "shirt", "shorts", "song", "space", "sport", "streetwear", "tan", "theme", "tutorial", "UI", "urban", "user", "UX", "website", "white", "wordpress", "yellow", "zombie"],
        afterAdd: function() {
            var str = $("#ajax_no_initial_tag_handler").tagHandler("getSerializedTags");
            $("strong").text(str);
        },

    });

    //http://ioncache.github.com/Tag-Handler/#examples
    //http://www.launchhype.com/all_posttags.php
});