JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&amp;.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.6/jquery.mobile-events.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.2/velocity.min.js"></script>

<div class="row">
  <div class="col m6 s12">
    <select id="a" multiple >
      <option value="1">One</option>
      <option selected value="2">Two</option>
      <option selected value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
    </select>
  </div>
</div>

CSS

.dropdown-content .close{
	position: absolute;
	right: 0px;
	top: 0px;
    text-align: right;
    padding-right: .75rem;
	padding-top: .75rem;
	height:0px;
	cursor: pointer;
}

.dropdown-content .search{
	margin-left:.75rem;
	margin-right:.75rem;
}
.dropdown-content .search-input{
	margin-bottom:5px;
	line-height: 3rem;
}

JavaScript

$.fn.materialize_select = function(settings){
	if(!settings) settings = {};
	return this.each(function(){
		return $.fn.materialize_select.module.call($(this),settings);
	});
};

$.fn.materialize_select.module = function(settings){
	/*
	 * GLOBALS
	 */
	var select = this, selected, multiple, ajax, wrapper, caret, trigger, dropdown, dropdownOpen, placeholder;

	function init()
	{
		if(select.hasClass('materialize_select_processed')) return;
		else select.addClass('materialize_select_processed');

		if(settings.debug)
		{
			select.show();
			select.height(500);
			select.css('margin-top','300px');
		}

		selected = [];
		dropdownOpen = false;
		multiple = (select.attr('multiple')) ? true : false;
		ajax = select.attr('ajax') || null;
		placeholder = select.attr('placeholder') || ( multiple ? 'Select Multiple' : 'Select One' );
		wrapper = $('<div class="select-wrapper"></div>');
		caret = $('<span class="caret">&#9660;</span>');
		trigger = $('<input></input>');
		trigger.addClass('select-dropdown');
		trigger.attr('placeholder',placeholder);
		dropdown = $('<ul></ul>');
		wrapper.insertAfter(select);
		wrapper.append(caret).append(trigger).append(dropdown).append(select);
		dropdown.addClass('dropdown-content select-dropdown');

		initEvents();
		return load();
	}

	function load(callback)
	{
		loadOptionsFromSelect();
		if(ajax)
			return prefetchAjax(callback);
		else 
			return updateTrigger(callback);
	}

	function loadOptionsFromSelect()
	{
		selected = [];
		select.find('option').each(function(){
			selected.push({
				value: $(this).attr('value'),
				text: $(this).html(),
				selected: $(this).is(':selected')
			});
		});
	}

	function getAllOptions(field)
	{
		if(!field)
			return selected;
		var vals = [];
		for(var i=0;i<selected.length;i++)
			vals.push(selected[i][field]);
		return vals;
	}

	function getSelectedOptions(field)
	{
		var vals = [];
		for(var...