Taggle.js with typeahead
HTML
<script src="https://npmcdn.com/[email protected]"></script>
<div id="example1" class="input textarea"></div>
CSS
h1,h2,h3,h4,h5,h6{text-shadow:1px 1px 1px #fff;color:#000;font-weight:700;line-height:1.5;margin:0}ul{margin:0;padding:0}pre{border-radius:3px}p{color:#000}p a{color:#903;text-decoration:none;transition:all .25s;padding:3px}p a:hover{color:#fff;background:#903;transition:all .25s}.btn{background:#903;padding:12px 30px;border-radius:3px;margin-right:10px;color:#fff!important;position:relative;display:inline-block;width:130px}.btn:hover{background:#c04}.btn:active{top:1px}.btn:last-child{margin-right:0}::-moz-selection{background:#903;color:#fff}::selection{background:#903;color:#fff}::-moz-selection{background:#903;color:#fff}.ui-autocomplete{position:absolute;top:0;left:0}.ui-menu{list-style:none;padding:2px;margin:0;display:block;outline:0}.ui-widget-content{background:#fff;color:#903}.ui-menu .ui-menu-item{margin:0;padding:0;width:100%}.ui-menu .ui-menu-item a{text-decoration:none;display:block;padding:2px .4em;line-height:1.5;min-height:0;font-weight:400;color:#8a8a8a;cursor:pointer}.ui-menu .ui-menu-item a:hover{color:#fff;background:#903}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{background:#903;color:#fff!important}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited{color:#fff}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #aaa;background:#fff;font-weight:400;color:#212121}.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-16px)}60%{-webkit-transform:translateY(-7px)}}@keyframes...
JavaScript
/* !
* @author Sean Coker <[email protected]>
* @version 1.6.1
* @url http://sean.is/poppin/tags
* @license MIT
* @description Taggle is a dependency-less tagging library
*/
(function(window, document) {
'use strict';
/////////////////////
// Default options //
/////////////////////
var noop = function() {};
var DEFAULTS = {
/**
* Class names to be added on each tag entered
* @type {String}
*/
additionalTagClasses: '',
/**
* Allow duplicate tags to be entered in the field?
* @type {Boolean}
*/
allowDuplicates: true,
/**
* Allow the saving of a tag on blur, rather than it being
* removed.
*
* @type {Boolean}
*/
saveOnBlur: false,
/**
* Class name that will be added onto duplicate existant tag
* @type {String}
* @todo
* @deprecated
*/
duplicateTagClass: '',
/**
* Class added to the container div when focused
* @type {String}
*/
containerFocusClass: 'active',
/**
* Name added to the hidden inputs within each tag
* @type {String}
*/
hiddenInputName: 'taggles[]',
/**
* Tags that should be preloaded in the div on load
* @type {Array}
*/
tags: [],
/**
* Tags that the user will be restricted to
* @type {Array}
*/
allowedTags: [],
/**
* Tags that the user will not be able to add
* @type {Array}
*/
disallowedTags: [],
/**
* If within a form, you can specify the tab index flow
* @type {Number}
*/
tabIndex: 1,
/**
* Placeholder string to be placed in an empty taggle field
* @type {String}
*/
placeholder: 'Enter tags...',
...