---
title: Email Contacts Example
nav_title: Email Contacts
tags: demo
---



{% from "demo.njk" import demo %}

{% set label %}
<label class="h2 mb-3">Email Contacts</label>
<p>An example showing how you might go about creating contact selector like those used in Email apps.</p>
<p>Search by email address with "email:gmail.com" or last name with "last:tesla"</p>
{% endset %}

{% set html %}
<select id="select-to" class="contacts" placeholder="Pick some people..."></select>
{% endset %}

<script>
{% set script %}
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 ((item.first || '') + ' ' + (item.last || '')).trim();
};

new TomSelect('#select-to',{
	persist: false,
	maxItems: null,
	valueField: 'email',
	labelField: 'name',
	searchField: ['first', 'last', 'email'],
	sortField: [
		{field: 'first', direction: 'asc'},
		{field: 'last', direction: 'asc'}
	],
	options: [
		{email: 'nikola@tesla.com', first: 'Nikola', last: 'Tesla'},
		{email: 'brian@thirdroute.com', first: 'Brian', last: 'Reavis'},
		{email: 'someone@gmail.com'},
		{email: 'example@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>';
		}
	},
	createFilter: function(input) {
		var regexpA = new RegExp('^' + REGEX_EMAIL + '$', 'i');
		var regexpB = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
		return regexpA.test(input) || regexpB.test(input);
	},
	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       = match[1].trim();
			var pos_space  = name.indexOf(' ');
			var first = name.substring(0, pos_space);
			var last  = name.substring(pos_space + 1);

			return {
				email: match[2],
				first: first,
				last: last
			};
		}
		alert('Invalid email address.');
		return false;
	}
});
{% endset %}
</script>

<style>
{% set style %}
.ts-control.contacts .ts-input > div .email {
	opacity: 0.7;
}
.ts-control.contacts .ts-input > div .name + .email {
	margin-left: 5px;
}
.ts-control.contacts .ts-input > div .email:before {
	content: '<';
}
.ts-control.contacts .ts-input > div .email:after {
	content: '>';
}
.ts-control.contacts .ts-dropdown .caption {
	font-size: 12px;
	display: block;
	color: #a0a0a0;
}
{% endset %}
</style>

{{ demo( label, html, script, style) }}