dangerouse/selectize-after-choose.html

## selectize-after-choose.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>CloudSponge Selectize Example</title>
  <!-- Selectize styles -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" type="text/css">
  <style>
    /**
     * Extra styles required to format emails nicely inside the selectize input
     */
    .selectize-control.contacts .selectize-input [data-value] .email {
    	opacity: 0.5;
    }
    .selectize-control.contacts .selectize-input [data-value] .name + .email {
    	margin-left: 5px;
    }
    .selectize-control.contacts .selectize-dropdown .caption {
    	font-size: 12px;
    	display: block;
    	opacity: 0.5;
    }
  </style>
</head>
<body>
  <p>
    This is an example demonstrating the use of the
    <a href="http://www.cloudsponge.com/">CloudSponge.com</a> widget with the
    <a href="http://brianreavis.github.io/selectize.js/">Selectize.js</a>
    jQuery plugin for rendering the contacts in a friendly drop down list on
    your site.
  </p>
  <p>Click the link below to get started.</p>

  <p><a href="#" class="cloudsponge-launch">Connect Your Address Book</a></p>

  <!-- Email drop down is hidden until the contacts are imported -->
  <p id="emails" style="display:none">
    <label for="select-to">Email:</label>
    <select id="select-to" class="contacts selectized"
      placeholder="Pick some people..." multiple="multiple"
      tabindex="-1" style="display: none;"></select>
  </p>

  <!-- Including jquery and selectize -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microplugin/0.0.3/microplugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>

  <script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
  <!-- configure csPageOptions for cloudsponge -->
  <script>
  // email regex for filtering contacts in the drop down
  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])?)';

  // configuring csPageOptions for cloudsponge with a
  //  beforeDisplayContacts handler to manage rendering the contacts
  cloudsponge.init({
    // after the user selects their contacts, add them to the form
    afterSubmitContacts:function(contacts) {
      // initialize the selectize component
      $('#select-to').selectize({
        persist: false,
        maxItems: null, // no max
        valueField: 'email',
        labelField: 'name',
        searchField: ['email'],
        // set up sorting
        sortField: [{field: 'email'}],
        // start with an empty array, we will append options in a moment via the selectize API
        options: [],
        render: {
          item: function(item, escape) {
            return '<div>' +
              // (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
              (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
            '</div>';
          },
          option: function(item, escape) {
            var label = item.email;
            return '<div>' +
              '<span class="label">' + escape(label) + '</span>' +
              // (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
            '</div>';
          }
        },
        // only display contacts that have an email address
        createFilter: function(input) {
          var match, regex;

          // email@address.com
          regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
          match = input.match(regex);
          if (match) return !this.options.hasOwnProperty(match[0]);

          // name <email@address.com>
          regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
          match = input.match(regex);
          if (match) return !this.options.hasOwnProperty(match[2]);

          return false;
        },
        // allow free-form input, as long as it looks like an email address
        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) {
            return {
              email : match[2],
              name  : $.trim(match[1])
            };
          }
          alert('Invalid email address.');
          return false;
        }
      });

      $(contacts).each(function(i, contact) {
        var emailAddr = contact.primaryEmail().trim();
        if (emailAddr.length > 0) {
          $('#select-to')[0].selectize.addOption({email: emailAddr});
          $('#select-to')[0].selectize.addItem(emailAddr, true);
        }
      });

      // show the email box, now that it is populated
      $('#emails').css("display","block");

      // append the new contacts to the selectize options
      $('#select-to')[0].selectize.refreshItems();
    },
    // once the contacts are available, add them as options to the selectize
    beforeDisplayContacts:function(contacts) {

      // reload the options and open the selectize
      // $('#select-to')[0].selectize.refreshOptions(false);
    }
  });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>CloudSponge Selectize Example</title>
	<!-- Selectize styles -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" type="text/css">
	<style>
	/**
	* Extra styles required to format emails nicely inside the selectize input
	*/
	.selectize-control.contacts .selectize-input [data-value] .email {
	opacity: 0.5;
	}
	.selectize-control.contacts .selectize-input [data-value] .name + .email {
	margin-left: 5px;
	}
	.selectize-control.contacts .selectize-dropdown .caption {
	font-size: 12px;
	display: block;
	opacity: 0.5;
	}
	</style>
	</head>
	<body>
	<p>
	This is an example demonstrating the use of the
	<a href="http://www.cloudsponge.com/">CloudSponge.com</a> widget with the
	<a href="http://brianreavis.github.io/selectize.js/">Selectize.js</a>
	jQuery plugin for rendering the contacts in a friendly drop down list on
	your site.
	</p>
	<p>Click the link below to get started.</p>

	<p><a href="#" class="cloudsponge-launch">Connect Your Address Book</a></p>

	<!-- Email drop down is hidden until the contacts are imported -->
	<p id="emails" style="display:none">
	<label for="select-to">Email:</label>
	<select id="select-to" class="contacts selectized"
	placeholder="Pick some people..." multiple="multiple"
	tabindex="-1" style="display: none;"></select>
	</p>

	<!-- Including jquery and selectize -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/microplugin/0.0.3/microplugin.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>

	<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
	<!-- configure csPageOptions for cloudsponge -->
	<script>
	// email regex for filtering contacts in the drop down
	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])?)';

	// configuring csPageOptions for cloudsponge with a
	// beforeDisplayContacts handler to manage rendering the contacts
	cloudsponge.init({
	// after the user selects their contacts, add them to the form
	afterSubmitContacts:function(contacts) {
	// initialize the selectize component
	$('#select-to').selectize({
	persist: false,
	maxItems: null, // no max
	valueField: 'email',
	labelField: 'name',
	searchField: ['email'],
	// set up sorting
	sortField: [{field: 'email'}],
	// start with an empty array, we will append options in a moment via the selectize API
	options: [],
	render: {
	item: function(item, escape) {
	return '<div>' +
	// (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
	(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
	'</div>';
	},
	option: function(item, escape) {
	var label = item.email;
	return '<div>' +
	'<span class="label">' + escape(label) + '</span>' +
	// (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
	'</div>';
	}
	},
	// only display contacts that have an email address
	createFilter: function(input) {
	var match, regex;

	// email@address.com
	regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
	match = input.match(regex);
	if (match) return !this.options.hasOwnProperty(match[0]);

	// name <email@address.com>
	regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
	match = input.match(regex);
	if (match) return !this.options.hasOwnProperty(match[2]);

	return false;
	},
	// allow free-form input, as long as it looks like an email address
	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) {
	return {
	email : match[2],
	name : $.trim(match[1])
	};
	}
	alert('Invalid email address.');
	return false;
	}
	});

	$(contacts).each(function(i, contact) {
	var emailAddr = contact.primaryEmail().trim();
	if (emailAddr.length > 0) {
	$('#select-to')[0].selectize.addOption({email: emailAddr});
	$('#select-to')[0].selectize.addItem(emailAddr, true);
	}
	});

	// show the email box, now that it is populated
	$('#emails').css("display","block");

	// append the new contacts to the selectize options
	$('#select-to')[0].selectize.refreshItems();
	},
	// once the contacts are available, add them as options to the selectize
	beforeDisplayContacts:function(contacts) {

	// reload the options and open the selectize
	// $('#select-to')[0].selectize.refreshOptions(false);
	}
	});
	</script>
	</body>
	</html>