examples/contacts.html

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Selectize.js Demo</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/stylesheet.css">
		<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
		<script src="js/jquery.js"></script>
		<script src="../dist/js/standalone/selectize.js"></script>
		<script src="js/index.js"></script>
		<style type="text/css">
		.selectize-control.contacts .selectize-input > div {
			padding: 1px 10px;
			font-size: 13px;
			font-weight: normal;
			-webkit-font-smoothing: auto;
			color: #f7fbff;
			text-shadow: 0 1px 0 rgba(8,32,65,0.2);
			background: #2183f5;
			background: -moz-linear-gradient(top, #2183f5 0%, #1d77f3 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2183f5), color-stop(100%,#1d77f3));
			background: -webkit-linear-gradient(top,  #2183f5 0%,#1d77f3 100%);
			background: -o-linear-gradient(top,  #2183f5 0%,#1d77f3 100%);
			background: -ms-linear-gradient(top,  #2183f5 0%,#1d77f3 100%);
			background: linear-gradient(to bottom,  #2183f5 0%,#1d77f3 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2183f5', endColorstr='#1d77f3',GradientType=0 );
			border: 1px solid #0f65d2;
			-webkit-border-radius: 999px;
			-moz-border-radius: 999px;
			border-radius: 999px;
			-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
			-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
			box-shadow: 0 1px 1px rgba(0,0,0,0.15);
		}
		.selectize-control.contacts .selectize-input > div.active {
			background: #0059c7;
			background: -moz-linear-gradient(top, #0059c7 0%, #0051c1 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0059c7), color-stop(100%,#0051c1));
			background: -webkit-linear-gradient(top,  #0059c7 0%,#0051c1 100%);
			background: -o-linear-gradient(top,  #0059c7 0%,#0051c1 100%);
			background: -ms-linear-gradient(top,  #0059c7 0%,#0051c1 100%);
			background: linear-gradient(to bottom,  #0059c7 0%,#0051c1 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0059c7', endColorstr='#0051c1',GradientType=0 );
			border-color: #0051c1;
		}
		.selectize-control.contacts .selectize-input > div .email {
			opacity: 0.8;
		}
		.selectize-control.contacts .selectize-input > div .name + .email {
			margin-left: 5px;
		}
		.selectize-control.contacts .selectize-input > div .email:before {
			content: '<';
		}
		.selectize-control.contacts .selectize-input > div .email:after {
			content: '>';
		}
		.selectize-control.contacts .selectize-dropdown .caption {
			font-size: 12px;
			display: block;
			color: #a0a0a0;
		}
		</style>
	</head>
    <body>
		<div id="wrapper">
			<h1>Selectize.js</h1>
			<div class="demo">
				<h2>Email Contacts</h2>
				<p>An example showing how you might go about creating contact selector like those used in Email apps.</p>
				<div class="control-group">
					<label for="select-to">To:</label>
					<select id="select-to" class="contacts" placeholder="Pick some people..."></select>
				</div>
				<script>
				// <select id="select-to"></select>

				var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
				                  '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';

				var formatName = function(item) {
					return $.trim((item.first_name || '') + ' ' + (item.last_name || ''));
				};

				$('#select-to').selectize({
					persist: false,
					maxItems: null,
					valueField: 'email',
					labelField: 'name',
					searchField: ['first_name', 'last_name', 'email'],
					sortField: [
						{field: 'first_name', direction: 'asc'},
						{field: 'last_name', direction: 'asc'}
					],
					options: [
						{email: 'nikola@tesla.com', first_name: 'Nikola', last_name: 'Tesla'},
						{email: 'brian@thirdroute.com', first_name: 'Brian', last_name: 'Reavis'},
						{email: 'someone@gmail.com'}
					],
					render: {
						item: function(item, escape) {
							var name = formatName(item);
							return '<div>' +
								(name ? '<span class="name">' + escape(name) + '</span>' : '') +
								(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
							'</div>';
						},
						option: function(item, escape) {
							var name = formatName(item);
							var label = name || item.email;
							var caption = name ? item.email : null;
							return '<div>' +
								'<span class="label">' + escape(label) + '</span>' +
								(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
							'</div>';
						}
					},
					create: function(input) {
						if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
							return {email: input};
						}
						var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
						if (match) {
							var name       = $.trim(match[1]);
							var pos_space  = name.indexOf(' ');
							var first_name = name.substring(0, pos_space);
							var last_name  = name.substring(pos_space + 1);

							return {
								email: match[2],
								first_name: first_name,
								last_name: last_name
							};
						}
						alert('Invalid email address.');
						return false;
					}
				});
				</script>
			</div>
		</div>
	</body>
</html>