uiTokenizer
by JoshuaIRL
HTML
<script src="http://jquery-watermark.googlecode.com/svn/trunk/jquery-watermark/jquery.watermark/jquery.watermark.min.js"></script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="http://ccpd.uc.edu.nyud.net/static/js/jquery-plugins/jquery.event.drag.js"></script>
<script src="http://ccpd.uc.edu.nyud.net/static/js/jquery-plugins/jquery.event.drop.js"></script>
<select class="uiTokenInput form-Degrees2 has-photo" name="Degrees2" id="Degrees2" size="10" multiple="multiple" style="width:350px;">
<option selected="selected" value="0">Jack Johnson</option>
<option selected="selected" value="1">Relient K</option>
<option selected="selected" value="2">Dave Matthews Band</option>
<option selected="selected" value="3">Jason Mraz</option>
<option selected="selected" value="4">Travis Flynn</option>
<option selected="selected" value="5">Punching people in the face</option>
<option selected="selected" value="6">The Waking Point</option>
<option selected="selected" value="7">Rihanna</option>
<option selected="selected" value="8">Eminem</option>
<option selected="selected" value="9">Usher</option>
<option selected="selected" value="10">AKON</option>
<option selected="selected" value="11">50 Cent</option>
<option selected="selected" value="12">Kanye West</option>
<option selected="selected" value="13">Lady Gaga</option>
<option selected="selected" value="14">Lil Wayne</option>
<option selected="selected" value="15">Death Cab for Cutie</option>
<option selected="selected" value="16">Erick Baker</option>
<option selected="selected" value="17">LUDO</option>
<option selected="selected" value="18">My Chemical Romance</option>
<option selected="selected" value="19">Jennisfar</option>
<option selected="selected" value="20">Third Day</option>
<option selected="selected" value="21">Hawk Nelson</option>
<option selected="selected" value="22">July For Kings</option>
<option selected="selected" value="23">Chris...CSS
html { height: 100%; overflow-y: scroll; }
body { margin:10px!important; }
/* -----------------------------------------------------------------------
Blueprint CSS Framework 1.0
http://blueprintcss.org
* Copyright (c) 2007-Present. See LICENSE for more info.
* See README for instructions on how to use Blueprint.
* For credits and origins, see AUTHORS.
* This is a compressed file. See the sources in the 'src' directory.
----------------------------------------------------------------------- */
/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}
/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#222;background:#fff;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6...JavaScript
/* THE GOAL OF THIS PLUGIN IS TO MAKE AN FB-STYLE TOKENIZER WITH PHOTO OPTION
accepts json data each object containing three fields, a label, a value, and an image path */
/* As much as I flove the jQuery UI framework it was a goal of mine to keep this agnostic of that as much as possible. */
/* for now, it will be dependent on the jquery UI autocomplete but nothing else */
//TOKENIZER PLUGIN
;(function($){
var debug = true;
var methods = {
/* INITIAL SETTINGS / HTML INJECTION */
init : function( options ) {
var settings = $.extend(
{},
$.tokenize.defaults,
options
);
return this.each(function () {
var tokenized = new $.tokenize(this, settings);
});
}
};
/* METHOD CALLS */
$.fn.tokenizer = function(method) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tokenizer' );
}
};
/* TOKENIZE - Internal core logic */
$.tokenize = function(input,settings) {
/*log(input);
log(settings);*/
var KEY = {
BACKSPACE: 8,
TAB: 9,
RETURN: 13,
ESC: 27,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
COMMA: 188,
ENTER: 13
};
// storage variables
var $tokens = null;
var token_items = [];
$.template("token_template",settings.tokenTmpl);
// ORIGINAL INPUT - hidden
var $hiddenInput = $(input).hide().focus(function () { }).blur(function...