jQuery标签下拉列表控件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery标签下拉列表控件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery标签下拉列表控件</title>
<!--<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700">-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<!--[if IE 8]>
<script src="js/es5-shim.min.js"></script>
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/highlight.min.js"></script>
<script src="js/selectize.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="inset" id="content">
	<div class="wrapper" id="tabs">
		<ul class="tabs">
			<li class="active"><a href="#demos" data-section="#demos">Demos</a></li>
			<li><a href="#demos" data-section="#plugins">Plugins</a></li>
		</ul>
	</div>
	<div class="wrapper tab-content" id="demos">
		<!-- ************** Tagging Demo ************** -->
				<section class="demo">
					<div class="header">
						Tagging </div>
		<div class="sandbox">
			<label for="input-tags">Tags:</label>
			<input type="text" id="input-tags" class="demo-default" value="awesome,neat">
		</div>
		<div class="description">
			Add and remove items in any order without touching your mouse. Use 
			your left/right arrow keys to move the caret (ibeam) between items. 
			This example is instantiated from a <code>&lt;input type=&quot;text&quot;&gt;</code> 
			element (note that the value is represented as a string). </div>
		<script class="show">
					$('#input-tags').selectize({
						delimiter: ',',
						persist: false,
						create: function(input) {
							return {
								value: input,
								text: input
							}
						}
					});
					</script>
				</section>

				<!-- ************** Email Contacts Demo ************** -->
				<section class="demo">
					<div class="header">
						Email Contacts </div>
		<div class="sandbox">
			<label for="select-to">Email:</label>
			<select id="select-to" placeholder="Pick some people..."></select>
		</div>
		<div class="description">
			This demonstrates two main things: (1) custom item and option 
			rendering, and (2) item creation on-the-fly. Try typing a valid and 
			invalid email address. </div>
		<script class="show">
					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])?)';

					$('#select-to').selectize({
						theme: 'contacts',
						persist: false,
						maxItems: null,
						valueField: 'email',
						labelField: 'name',
						searchField: ['name', 'email'],
						options: [
							{email: 'brian@thirdroute.com', name: 'Brian Reavis'},
							{email: 'nikola@tesla.com', name: 'Nikola Tesla'},
							{email: 'someone@gmail.com'}
						],
						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.name || item.email;
								var caption = item.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) {
								return {
									email : match[2],
									name  : $.trim(match[1])
								};
							}
							alert('Invalid email address.');
							return false;
						}
					});
					</script>
				</section>

				<!-- ************** Single Item Select Demo ************** -->
				<section class="demo">
					<div class="header">
						Single Item Select </div>
		<div class="sandbox">
			<label for="select-beast">Beast:</label>
			<select id="select-beast" class="demo-default" placeholder="Select a person...">
			<option value>Select a person...</option>
			<option value="1">Chuck Testa</option>
			<option value="4">Sage Cattabriga-Alosa</option>
			<option value="3">Nikola Tesla</option>
			</select> </div>
		<div class="description">
			The most vanilla of examples. </div>
		<script class="show">
					$('#select-beast').selectize({
						create: true,
						sortField: 'text'
					});
					</script>
				</section>


				<!-- ************** Optgroup Demo ************** -->
				<section class="demo">
					<div class="header">
						Option Groups </div>
		<div class="sandbox">
			<label for="select-gear">Gear:</label>
			<select id="select-gear" class="demo-default" placeholder="Select gear...">
			<option value>Select gear...</option>
			<optgroup label="Climbing">
			<option value="pitons">Pitons</option>
			<option value="cams">Cams</option>
			<option value="nuts">Nuts</option>
			<option value="bolts">Bolts</option>
			<option value="stoppers">Stoppers</option>
			<option value="sling">Sling</option>
			</optgroup>
			<optgroup label="Skiing">
			<option value="skis">Skis</option>
			<option value="skins">Skins</option>
			<option value="poles">Poles</option>
			</optgroup>
			</select> </div>
		<div class="description">
			Selectize supports &lt;optgroup&gt; rendering (as of v0.5.0). </div>
		<script class="show">
					$('#select-gear').selectize({
						sortField: 'text'
					});
					</script>
				</section>

				<!-- ************** Max Items Demo ************** -->
				<section class="demo">
					<div class="header">
						Max Items </div>
		<div class="sandbox">
			<label for="select-state">States:</label>
			<select id="select-state" name="state[]" multiple class="demo-default" style="width:70%" placeholder="Select a state...">
			<option value>Select a state...</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA" selected>California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY" selected>Wyoming</option>
			</select> </div>
		<div class="description">
			This example only allows 3 items. Select one more item and the 
			control will be disabled until one or more are deleted. </div>
		<script class="show">
					$('#select-state').selectize({
						maxItems: 3
					});
					</script>
				</section>

				<!-- ************** Country Selector Demo ************** -->
				<section class="demo">
					<div class="header">
						Country Selector </div>
		<div class="sandbox">
			<label for="select-country">Country:</label>
			<select id="select-country" class="demo-default" placeholder="Select a country...">
			<option value>Select a country...</option>
			<option value="AF">Afghanistan</option>
			<option value="AX">Åland Islands</option>
			<option value="AL">Albania</option>
			<option value="DZ">Algeria</option>
			<option value="AS">American Samoa</option>
			<option value="AD">Andorra</option>
			<option value="AO">Angola</option>
			<option value="AI">Anguilla</option>
			<option value="AQ">Antarctica</option>
			<option value="AG">Antigua and Barbuda</option>
			<option value="AR">Argentina</option>
			<option value="AM">Armenia</option>
			<option value="AW">Aruba</option>
			<option value="AU">Australia</option>
			<option value="AT">Austria</option>
			<option value="AZ">Azerbaijan</option>
			<option value="BS">Bahamas</option>
			<option value="BH">Bahrain</option>
			<option value="BD">Bangladesh</option>
			<option value="BB">Barbados</option>
			<option value="BY">Belarus</option>
			<option value="BE">Belgium</option>
			<option value="BZ">Belize</option>
			<option value="BJ">Benin</option>
			<option value="BM">Bermuda</option>
			<option value="BT">Bhutan</option>
			<option value="BO">Bolivia, Plurinational State of</option>
			<option value="BA">Bosnia and Herzegovina</option>
			<option value="BW">Botswana</option>
			<option value="BV">Bouvet Island</option>
			<option value="BR">Brazil</option>
			<option value="IO">British Indian Ocean Territory</option>
			<option value="BN">Brunei Darussalam</option>
			<option value="BG">Bulgaria</option>
			<option value="BF">Burkina Faso</option>
			<option value="BI">Burundi</option>
			<option value="KH">Cambodia</option>
			<option value="CM">Cameroon</option>
			<option value="CA">Canada</option>
			<option value="CV">Cape Verde</option>
			<option value="KY">Cayman Islands</option>
			<option value="CF">Central African Republic</option>
			<option value="TD">Chad</option>
			<option value="CL">Chile</option>
			<option value="CN">China</option>
			<option value="CX">Christmas Island</option>
			<option value="CC">Cocos (Keeling) Islands</option>
			<option value="CO">Colombia</option>
			<option value="KM">Comoros</option>
			<option value="CG">Congo</option>
			<option value="CD">Congo, the Democratic Republic of the</option>
			<option value="CK">Cook Islands</option>
			<option value="CR">Costa Rica</option>
			<option value="CI">Côte d&#39;Ivoire</option>
			<option value="HR">Croatia</option>
			<option value="CU">Cuba</option>
			<option value="CY">Cyprus</option>
			<option value="CZ">Czech Republic</option>
			<option value="DK">Denmark</option>
			<option value="DJ">Djibouti</option>
			<option value="DM">Dominica</option>
			<option value="DO">Dominican Republic</option>
			<option value="EC">Ecuador</option>
			<option value="EG">Egypt</option>
			<option value="SV">El Salvador</option>
			<option value="GQ">Equatorial Guinea</option>
			<option value="ER">Eritrea</option>
			<option value="EE">Estonia</option>
			<option value="ET">Ethiopia</option>
			<option value="FK">Falkland Islands (Malvinas)</option>
			<option value="FO">Faroe Islands</option>
			<option value="FJ">Fiji</option>
			<option value="FI">Finland</option>
			<option value="FR">France</option>
			<option value="GF">French Guiana</option>
			<option value="PF">French Polynesia</option>
			<option value="TF">French Southern Territories</option>
			<option value="GA">Gabon</option>
			<option value="GM">Gambia</option>
			<option value="GE">Georgia</option>
			<option value="DE">Germany</option>
			<option value="GH">Ghana</option>
			<option value="GI">Gibraltar</option>
			<option value="GR">Greece</option>
			<option value="GL">Greenland</option>
			<option value="GD">Grenada</option>
			<option value="GP">Guadeloupe</option>
			<option value="GU">Guam</option>
			<option value="GT">Guatemala</option>
			<option value="GG">Guernsey</option>
			<option value="GN">Guinea</option>
			<option value="GW">Guinea-Bissau</option>
			<option value="GY">Guyana</option>
			<option value="HT">Haiti</option>
			<option value="HM">Heard Island and McDonald Islands</option>
			<option value="VA">Holy See (Vatican City State)</option>
			<option value="HN">Honduras</option>
			<option value="HK">Hong Kong</option>
			<option value="HU">Hungary</option>
			<option value="IS">Iceland</option>
			<option value="IN">India</option>
			<option value="ID">Indonesia</option>
			<option value="IR">Iran, Islamic Republic of</option>
			<option value="IQ">Iraq</option>
			<option value="IE">Ireland</option>
			<option value="IM">Isle of Man</option>
			<option value="IL">Israel</option>
			<option value="IT">Italy</option>
			<option value="JM">Jamaica</option>
			<option value="JP">Japan</option>
			<option value="JE">Jersey</option>
			<option value="JO">Jordan</option>
			<option value="KZ">Kazakhstan</option>
			<option value="KE">Kenya</option>
			<option value="KI">Kiribati</option>
			<option value="KP">Korea, Democratic People&#39;s Republic of</option>
			<option value="KR">Korea, Republic of</option>
			<option value="KW">Kuwait</option>
			<option value="KG">Kyrgyzstan</option>
			<option value="LA">Lao People&#39;s Democratic Republic</option>
			<option value="LV">Latvia</option>
			<option value="LB">Lebanon</option>
			<option value="LS">Lesotho</option>
			<option value="LR">Liberia</option>
			<option value="LY">Libyan Arab Jamahiriya</option>
			<option value="LI">Liechtenstein</option>
			<option value="LT">Lithuania</option>
			<option value="LU">Luxembourg</option>
			<option value="MO">Macao</option>
			<option value="MK">Macedonia, the former Yugoslav Republic of
			</option>
			<option value="MG">Madagascar</option>
			<option value="MW">Malawi</option>
			<option value="MY">Malaysia</option>
			<option value="MV">Maldives</option>
			<option value="ML">Mali</option>
			<option value="MT">Malta</option>
			<option value="MH">Marshall Islands</option>
			<option value="MQ">Martinique</option>
			<option value="MR">Mauritania</option>
			<option value="MU">Mauritius</option>
			<option value="YT">Mayotte</option>
			<option value="MX">Mexico</option>
			<option value="FM">Micronesia, Federated States of</option>
			<option value="MD">Moldova, Republic of</option>
			<option value="MC">Monaco</option>
			<option value="MN">Mongolia</option>
			<option value="ME">Montenegro</option>
			<option value="MS">Montserrat</option>
			<option value="MA">Morocco</option>
			<option value="MZ">Mozambique</option>
			<option value="MM">Myanmar</option>
			<option value="NA">Namibia</option>
			<option value="NR">Nauru</option>
			<option value="NP">Nepal</option>
			<option value="NL">Netherlands</option>
			<option value="AN">Netherlands Antilles</option>
			<option value="NC">New Caledonia</option>
			<option value="NZ">New Zealand</option>
			<option value="NI">Nicaragua</option>
			<option value="NE">Niger</option>
			<option value="NG">Nigeria</option>
			<option value="NU">Niue</option>
			<option value="NF">Norfolk Island</option>
			<option value="MP">Northern Mariana Islands</option>
			<option value="NO">Norway</option>
			<option value="OM">Oman</option>
			<option value="PK">Pakistan</option>
			<option value="PW">Palau</option>
			<option value="PS">Palestinian Territory, Occupied</option>
			<option value="PA">Panama</option>
			<option value="PG">Papua New Guinea</option>
			<option value="PY">Paraguay</option>
			<option value="PE">Peru</option>
			<option value="PH">Philippines</option>
			<option value="PN">Pitcairn</option>
			<option value="PL">Poland</option>
			<option value="PT">Portugal</option>
			<option value="PR">Puerto Rico</option>
			<option value="QA">Qatar</option>
			<option value="RE">Réunion</option>
			<option value="RO">Romania</option>
			<option value="RU">Russian Federation</option>
			<option value="RW">Rwanda</option>
			<option value="BL">Saint Barthélemy</option>
			<option value="SH">Saint Helena, Ascension and Tristan da Cunha
			</option>
			<option value="KN">Saint Kitts and Nevis</option>
			<option value="LC">Saint Lucia</option>
			<option value="MF">Saint Martin (French part)</option>
			<option value="PM">Saint Pierre and Miquelon</option>
			<option value="VC">Saint Vincent and the Grenadines</option>
			<option value="WS">Samoa</option>
			<option value="SM">San Marino</option>
			<option value="ST">Sao Tome and Principe</option>
			<option value="SA">Saudi Arabia</option>
			<option value="SN">Senegal</option>
			<option value="RS">Serbia</option>
			<option value="SC">Seychelles</option>
			<option value="SL">Sierra Leone</option>
			<option value="SG">Singapore</option>
			<option value="SK">Slovakia</option>
			<option value="SI">Slovenia</option>
			<option value="SB">Solomon Islands</option>
			<option value="SO">Somalia</option>
			<option value="ZA">South Africa</option>
			<option value="GS">South Georgia and the South Sandwich Islands
			</option>
			<option value="ES">Spain</option>
			<option value="LK">Sri Lanka</option>
			<option value="SD">Sudan</option>
			<option value="SR">Suriname</option>
			<option value="SJ">Svalbard and Jan Mayen</option>
			<option value="SZ">Swaziland</option>
			<option value="SE">Sweden</option>
			<option value="CH">Switzerland</option>
			<option value="SY">Syrian Arab Republic</option>
			<option value="TW">Taiwan, Province of China</option>
			<option value="TJ">Tajikistan</option>
			<option value="TZ">Tanzania, United Republic of</option>
			<option value="TH">Thailand</option>
			<option value="TL">Timor-Leste</option>
			<option value="TG">Togo</option>
			<option value="TK">Tokelau</option>
			<option value="TO">Tonga</option>
			<option value="TT">Trinidad and Tobago</option>
			<option value="TN">Tunisia</option>
			<option value="TR">Turkey</option>
			<option value="TM">Turkmenistan</option>
			<option value="TC">Turks and Caicos Islands</option>
			<option value="TV">Tuvalu</option>
			<option value="UG">Uganda</option>
			<option value="UA">Ukraine</option>
			<option value="AE">United Arab Emirates</option>
			<option value="GB">United Kingdom</option>
			<option value="US">United States</option>
			<option value="UM">United States Minor Outlying Islands</option>
			<option value="UY">Uruguay</option>
			<option value="UZ">Uzbekistan</option>
			<option value="VU">Vanuatu</option>
			<option value="VE">Venezuela, Bolivarian Republic of</option>
			<option value="VN">Viet Nam</option>
			<option value="VG">Virgin Islands, British</option>
			<option value="VI">Virgin Islands, U.S.</option>
			<option value="WF">Wallis and Futuna</option>
			<option value="EH">Western Sahara</option>
			<option value="YE">Yemen</option>
			<option value="ZM">Zambia</option>
			<option value="ZW">Zimbabwe</option>
			</select> </div>
		<div class="description">
			A good example of (1) support for international characters 
			(diacritics) and (2) how items are scored and sorted. Try typing 
			&quot;islands&quot;, for instance.
		</div>
		<script class="show">
					$('#select-country').selectize();
					</script>
				</section>

				<!-- ************** Github Demo ************** -->
				<section class="demo">
					<div class="header">
						Remote Source — Github </div>
		<div class="sandbox">
			<label for="select-repo">Repository:</label>
			<select id="select-repo" placeholder="Pick a repository...">
			<option selected value="https://github.com/brianreavis/selectize.js" data-data="{&quot;type&quot;:&quot;repo&quot;,&quot;username&quot;:&quot;brianreavis&quot;,&quot;name&quot;:&quot;selectize.js&quot;,&quot;owner&quot;:&quot;brianreavis&quot;,&quot;homepage&quot;:null,&quot;description&quot;:&quot;A highly customizable select control with autocomplete.&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;watchers&quot;:6,&quot;followers&quot;:6,&quot;forks&quot;:0,&quot;size&quot;:216,&quot;open_issues&quot;:1,&quot;score&quot;:14.659029,&quot;has_downloads&quot;:true,&quot;has_issues&quot;:true,&quot;has_wiki&quot;:true,&quot;fork&quot;:false,&quot;private&quot;:false,&quot;url&quot;:&quot;https://github.com/brianreavis/selectize.js&quot;,&quot;created&quot;:&quot;2012-08-29T18:31:57Z&quot;,&quot;created_at&quot;:&quot;2012-08-29T18:31:57Z&quot;,&quot;pushed_at&quot;:&quot;2013-05-05T19:13:48Z&quot;,&quot;pushed&quot;:&quot;2013-05-05T19:13:48Z&quot;}">
			selectize.js</option>
			</select> </div>
		<div class="description">
			This demo shows how to integrate third-party data from the GitHub 
			API.
		</div>
		<script class="show">
					$('#select-repo').selectize({
						theme: 'repositories',
						valueField: 'url',
						labelField: 'name',
						searchField: 'name',
						create: false,
						render: {
							option: function(item, escape) {
								return '<div>' +
									'<span class="title">' +
										'<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source') + '"></i>' + escape(item.name) + '</span>' +
										'<span class="by">' + escape(item.username) + '</span>' +
									'</span>' +
									'<span class="description">' + escape(item.description) + '</span>' +
									'<ul class="meta">' +
										(item.language ? '<li class="language">' + escape(item.language) + '</li>' : '') +
										'<li class="watchers"><span>' + escape(item.watchers) + '</span> watchers</li>' +
										'<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>' +
									'</ul>' +
								'</div>';
							}
						},
						score: function(search) {
							var score = this.getScoreFunction(search);
							return function(item) {
								return score(item) * (1 + Math.min(item.watchers / 100, 1));
							};
						},
						load: function(query, callback) {
							if (!query.length) return callback();
							$.ajax({
								url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
								type: 'GET',
								error: function() {
									callback();
								},
								success: function(res) {
									callback(res.repositories.slice(0, 10));
								}
							});
						}
					});
					</script>
				</section>

				<!-- ************** Rotten Tomatoes Demo ************** -->
				<section class="demo">
					<div class="header">
						Remote Source — Rotten Tomatoes </div>
		<div class="sandbox">
			<label for="select-movie">Movie:</label>
			<select id="select-movie" placeholder="Find a movie..."></select>
		</div>
		<div class="description">
			This demo shows how to integrate third-party data from the Rotten 
			Tomatoes API. Try searching for &quot;Iron Man&quot;. <strong>Note:</strong> 
			if this doesn&#39;t work, it&#39;s because the API limit has been reached... 
			try again later :) </div>
		<script class="show">
					$('#select-movie').selectize({
						theme: 'movies',
						valueField: 'title',
						labelField: 'title',
						searchField: 'title',
						options: [],
						create: false,
						render: {
							option: function(item, escape) {
								var actors = [];
								for (var i = 0, n = item.abridged_cast.length; i < n; i++) {
									actors.push('<span>' + escape(item.abridged_cast[i].name) + '</span>');
								}

								return '<div>' +
									'<img src="' + escape(item.posters.thumbnail) + '" alt="">' +
									'<span class="title">' +
										'<span class="name">' + escape(item.title) + '</span>' +
									'</span>' +
									'<span class="description">' + escape(item.synopsis || 'No synopsis available at this time.') + '</span>' +
									'<span class="actors">' + (actors.length ? 'Starring ' + actors.join(', ') : 'Actors unavailable') + '</span>' +
								'</div>';
							}
						},
						load: function(query, callback) {
							if (!query.length) return callback();
							$.ajax({
								url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
								type: 'GET',
								dataType: 'jsonp',
								data: {
									q: query,
									page_limit: 10,
									apikey: '3qqmdwbuswut94jv4eua3j85'
								},
								error: function() {
									callback();
								},
								success: function(res) {
									callback(res.movies);
								}
							});
						}
					});
					</script>
				</section>

				<!-- ************** Cities Demo ************** -->
				<section class="demo">
					<div class="header">
						City / State Selection </div>
		<div class="sandbox">
			<label for="select-cities-state">State:</label>
			<select id="select-cities-state" placeholder="Pick a state...">
			<option value>Select a state...</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
			</select> <label for="select-cities-city" style="margin-top:20px">
			City:</label>
			<select id="select-cities-city" placeholder="Pick a city...">
			</select> </div>
		<div class="description">
			A demonstration showing how to use the API to cascade controls for a 
			classic state / city selector. <strong>Note:</strong> The API for 
			fetching cities is a little spotty, so if it fails to list cities, 
			that&#39;s what&#39;s going on (try another state). </div>
		<script class="show">
					var xhr;
					var select_state, $select_state;
					var select_city, $select_city;

					$select_state = $('#select-cities-state').selectize({
						onChange: function(value) {
							if (!value.length) return;
							select_city.disable();
							select_city.clearOptions();
							select_city.load(function(callback) {
								xhr && xhr.abort();
								xhr = $.ajax({
									url: 'http://www.corsproxy.com/api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json',
									success: function(results) {
										select_city.enable();
										callback(results);
									},
									error: function() {
										callback();
									}
								})
							});
						}
					});

					$select_city = $('#select-cities-city').selectize({
						valueField: 'name',
						labelField: 'name',
						searchField: ['name']
					});

					select_city  = $select_city[0].selectize;
					select_state = $select_state[0].selectize;

					select_city.disable();
					</script>
				</section>

			</div>
	<div class="wrapper tab-content" id="plugins" style="display:none">
		<!-- ************** "restore_on_backspace" Plugin Demo ************** -->
				<section class="demo plugin">
					<div class="header">
						&quot;restore_on_backspace&quot; </div>
		<div class="sandbox">
			<label for="input-tags2">Tags:</label>
			<input type="text" id="input-tags2" class="demo-default" value="web development,design">
		</div>
		<div class="description">
			Press the [backspace] key and go back to editing the item without it 
			being fully removed. </div>
		<script class="show">
					$('#input-tags2').selectize({
						plugins: ['restore_on_backspace'],
						delimiter: ',',
						persist: false,
						create: function(input) {
							return {
								value: input,
								text: input
							}
						}
					});
					</script>
				</section>


				<!-- ************** "remove_button" Plugin Demo ************** -->
				<section class="demo plugin">
					<div class="header">
						&quot;remove_button&quot; </div>
		<div class="sandbox">
			<label for="input-tags3">Tags:</label>
			<input type="text" id="input-tags3" class="demo-default" value="science,biology,chemistry,physics">
		</div>
		<div class="description">
			This plugin adds classic a classic remove button to each item for 
			behavior that mimics Select2 and Chosen. </div>
		<script class="show">
					$('#input-tags3').selectize({
						plugins: ['remove_button'],
						delimiter: ',',
						persist: false,
						create: function(input) {
							return {
								value: input,
								text: input
							}
						}
					});
					</script>
				</section>


				<!-- ************** "drag_drop" Plugin Demo ************** -->
				<section class="demo plugin">
					<div class="header">
						&quot;drag_drop&quot; </div>
		<div class="sandbox">
			<label for="input-draggable">Tags:</label>
			<input type="text" id="input-draggable" class="demo-default" value="drag,these,items,around,with,your,mouse">
		</div>
		<div class="description">
			Adds drag-and-drop support for easily rearranging selected items. 
			Requires jQuery UI (sortable). </div>
		<script class="show">
					$('#input-draggable').selectize({
						plugins: ['drag_drop'],
						delimiter: ',',
						persist: false,
						create: function(input) {
							return {
								value: input,
								text: input
							}
						}
					});
					</script>
				</section>

				<!-- ************** "optgroup_columns" Plugin Demo ************** -->
				<section class="demo plugin">
					<div class="header">
						&quot;optgroup_columns&quot; </div>
		<div class="sandbox">
			<label for="select-car">Car:</label>
			<select id="select-car" placeholder="Select a car..."></select>
		</div>
		<div class="description">
			A plugin by Simon Hewitt that renders optgroups horizontally with convenient 
			left/right keyboard navigation. </div>
		<script class="show">
					$("#select-car").selectize({
						options: [
							{id: 'avenger', make: 'dodge', model: 'Avenger'},
							{id: 'caliber', make: 'dodge', model: 'Caliber'},
							{id: 'caravan-grand-passenger', make: 'dodge', model: 'Caravan Grand Passenger'},
							{id: 'challenger', make: 'dodge', model: 'Challenger'},
							{id: 'ram-1500', make: 'dodge', model: 'Ram 1500'},
							{id: 'viper', make: 'dodge', model: 'Viper'},
							{id: 'a3', make: 'audi', model: 'A3'},
							{id: 'a6', make: 'audi', model: 'A6'},
							{id: 'r8', make: 'audi', model: 'R8'},
							{id: 'rs-4', make: 'audi', model: 'RS 4'},
							{id: 's4', make: 'audi', model: 'S4'},
							{id: 's8', make: 'audi', model: 'S8'},
							{id: 'tt', make: 'audi', model: 'TT'},
							{id: 'avalanche', make: 'chevrolet', model: 'Avalanche'},
							{id: 'aveo', make: 'chevrolet', model: 'Aveo'},
							{id: 'cobalt', make: 'chevrolet', model: 'Cobalt'},
							{id: 'silverado', make: 'chevrolet', model: 'Silverado'},
							{id: 'suburban', make: 'chevrolet', model: 'Suburban'},
							{id: 'tahoe', make: 'chevrolet', model: 'Tahoe'},
							{id: 'trail-blazer', make: 'chevrolet', model: 'TrailBlazer'},
						],
						optgroups: [
							{id: 'dodge', name: 'Dodge'},
							{id: 'audi', name: 'Audi'},
							{id: 'chevrolet', name: 'Chevrolet'}
						],
						labelField: 'model',
						valueField: 'id',
						optgroupField: 'make',
						optgroupLabelField: 'name',
						optgroupValueField: 'id',
						optgroupOrder: ['chevrolet', 'dodge', 'audi'],
						searchField: ['model'],
						plugins: ['optgroup_columns']
					});
					</script>
				</section>

			</div>
</div>
</body>
</html>

JS代码(main.js):

$(function(){
	// tab navigation$('#tabs').on('click','a',function(e){
	var $a = $(e.target);
	var $li = $a.parent();
	var selector = $a.attr('data-section');
	$li.siblings().removeClass('active');
	$li.addClass('active');
	$('.tab-content').hide();
	$(selector).show();
	e.preventDefault();
	return false;
}
);
	// show source code$('script.show').each(function(){
	var $a,$pre;
	var self = this;
	var code,lines,indent,lineindent,i,n;
	// re-indent code and add to <pre>code = this.text;
	if (code && code.length){
	lines = code.split('\n');
	indent = null;
	for (i = 0,n = lines.length;
	i < n;
	i++){
	if (/^[\t ]*$/.test(lines[i])) continue;
	if (!indent){
	lineindent = lines[i].match(/^([\t ]+)/);
	if (!lineindent) break;
	indent = lineindent[1];
}
lines[i] = lines[i].replace(new RegExp('^' + indent),'');
}
var code = hljs.highlight('javascript',$.trim(lines.join('\n')).replace(//g,' ')).value;
	$a = $('<a href="javascript:void(0)" class="toggle-code closed">Show Code</a>');
	$pre = $('<pre>').hide().html('<code class="javascript">' + code + '</code>');
	$a.on('click',function(){
	var state = !$pre.is(':visible');
	$pre.toggle(state);
	$a.toggleClass('open',state);
	$a.toggleClass('closed',!state);
	$a.html(state ? 'Hide Code':'Show Code');
}
);
	$pre.insertAfter(self);
	$a.insertAfter(self);
}
}
);
	// show current input values$('select.selectized,input.selectized').each(function(){
	var $container = $('<div>').addClass('value').html('Current Value:');
	var $value = $('<span>').appendTo($container);
	var $input = $(this);
	var update = function(e){
	$value.text(JSON.stringify($input.val()));
}
$(this).on('change',update);
	update();
	$container.insertAfter($input.next());
}
);
}
);

CSS代码(normalize.css):

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ========================================================================== HTML5 display definitions ========================================================================== */
/* * Corrects `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}
/* * Corrects `inline-block` display not defined in IE 8/9. */
audio,canvas,video{display:inline-block;}
/* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]){display:none;height:0;}
/* * Addresses styling for `hidden` attribute not present in IE 8/9. */
[hidden]{display:none;}
/* ========================================================================== Base ========================================================================== */
/* * 1. Sets default font family to sans-serif. * 2. Prevents iOS text size adjust after orientation change,without disabling * user zoom. */
html{font-family:sans-serif;/* 1 */
 -webkit-text-size-adjust:100%;/* 2 */
 -ms-text-size-adjust:100%;/* 2 */
}
/* * Removes default margin. */
body{margin:0;}
/* ========================================================================== Links ========================================================================== */
/* * Addresses `outline` inconsistency between Chrome and other browsers. */
a:focus{outline:thin dotted;}
/* * Improves readability when focused and also mouse hovered in all browsers. */
a:active,a:hover{outline:0;}
/* ========================================================================== Typography ========================================================================== */
/* * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,* Safari 5,and Chrome. */
h1{font-size:2em;}
/* * Addresses styling not present in IE 8/9,Safari 5,and Chrome. */
abbr[title]{border-bottom:1px dotted;}
/* * Addresses style set to `bolder` in Firefox 4+,Safari 5,and Chrome. */
b,strong{font-weight:bold;}
/* * Addresses styling not present in Safari 5 and Chrome. */
dfn{font-style:italic;}
/* * Addresses styling not present in IE 8/9. */
mark{background:#ff0;color:#000;}
/* * Corrects font family set oddly in Safari 5 and Chrome. */
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
/* * Improves readability of pre-formatted text in all browsers. */
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
/* * Sets consistent quote types. */
q{quotes:"\201C" "\201D" "\2018" "\2019";}
/* * Addresses inconsistent and variable font size in all browsers. */
small{font-size:80%;}
/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* ========================================================================== Embedded content ========================================================================== */
/* * Removes border when inside `a` element in IE 8/9. */
img{border:0;}
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root){overflow:hidden;}
/* ========================================================================== Figures ========================================================================== */
/* * Addresses margin not present in IE 8/9 and Safari 5. */
figure{margin:0;}
/* ========================================================================== Forms ========================================================================== */
/* * Define consistent border,margin,and padding. */
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
/* * 1. Corrects color not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend{border:0;/* 1 */
 padding:0;/* 2 */
}
/* * 1. Corrects font family not being inherited in all browsers. * 2. Corrects font size not being inherited in all browsers. * 3. Addresses margins set differently in Firefox 4+,Safari 5,and Chrome */
button,input,select,textarea{font-family:inherit;/* 1 */
 font-size:100%;/* 2 */
 margin:0;/* 3 */
}
/* * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
button,input{line-height:normal;}
/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. */
button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{-webkit-appearance:button;/* 2 */
 cursor:pointer;/* 3 */
}
/* * Re-set default cursor for disabled elements. */
button[disabled],input[disabled]{cursor:default;}
/* * 1. Addresses box sizing set to `content-box` in IE 8/9. * 2. Removes excess padding in IE 8/9. */
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;/* 1 */
 padding:0;/* 2 */
}
/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */
input[type="search"]{-webkit-appearance:textfield;/* 1 */
 -moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */
 box-sizing:content-box;}
/* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
/* * Removes inner padding and border in Firefox 4+. */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
/* * 1. Removes default vertical scrollbar in IE 8/9. * 2. Improves readability and alignment in all browsers. */
textarea{overflow:auto;/* 1 */
 vertical-align:top;/* 2 */
}
/* ========================================================================== Tables ========================================================================== */
/* * Remove most spacing between table cells. */
table{border-collapse:collapse;border-spacing:0;}

CSS代码(styles.css):

::selection{background:#fff69d;}
::-moz-selection{background:#fff69d;}
body{font-family:'Open Sans',Helvetica,arial,sans-serif;font-size:15px;line-height:24px;font-weight:300;color:#5f6567;background:#fff;background-size:200px 200px;text-shadow:0 1px 0 rgba(0,0,0,0.03);-webkit-font-smoothing:antialiased;}
footer{margin-top:50px;font-size:12px;}
a,a:visited{color:#48afff;text-decoration:none;}
strong,#links a{font-weight:500;}
a:hover{color:#008af5;}
h1{font-weight:300;font-size:40px;margin-bottom:30px;}
h2{font-size:15px;}
label{display:block;font-weight:normal;margin-bottom:10px;}
p,.control-group{margin:0 0 20px 0;}
li{margin-bottom:5px;}
.toggle-code{font-size:12px;font-weight:500;}
.toggle-code::before{margin-right:5px;}
.toggle-code.closed::before{content:'\25B6';}
.toggle-code.open::before{content:'\25B2';}
#content{margin-top:35px;}
#tabs{padding:0;position:relative;}
.tabs{position:absolute;top:-32px;height:32px;margin:0;padding:0;list-style:none;}
.tabs li{display:inline-block;margin:0 5px 0 0;}
.tabs li a{border-radius:3px 3px 0 0;background:none;padding:10px;font-weight:400;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid transparent;}
.tabs li.active a,.tabs li.active a:hover{background:#f9fbfb;color:#404040;border-color:#ebeeed;}
/** * Syntax Highlighting */
pre code{width:1000px;display:block;}
pre{overflow:auto;width:100%;}
pre .string{color:#0d9bff;font-weight:500;}
pre .constant,pre .literal,pre .number{color:#fcb01d;}
pre .keyword{color:#fc611d;font-weight:bold;}
/** * Demos */
.demo{margin:0 0 50px 0;}
.demo > *{padding:15px 0;}
.demo > .header{font-size:25px;font-weight:300;padding-top:0;margin-bottom:10px;}
.demo .sandbox{padding:0;}
.demo select,.demo input,.demo .selectize-control{width:100%;}
.demo > *:first-child{margin-top:0;}
.demo > *:last-child{margin-bottom:0;}
.demo .value{margin:10px 0 0 0;font-size:12px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.demo .value span{font-family:Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;}
.inset{background:#f9fbfb;border-top:1px solid #ebeeed;border-bottom:1px solid #ebeeed;}
.wrapper{width:520px;margin:0 auto;text-align:left;padding:40px 0;}
.wrapper > *:last-child{margin-bottom:0;}
pre{background:rgba(45,45,45,0.01);box-shadow:inset 0 1px 3px rgba(0,0,0,0.06);padding:10px !important;font-size:12px;line-height:15px;font-family:Monaco,"Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
input[type=button]{margin:0 10px 0 0;padding:6px 10px;color:#606060;background:#e0e0e0;border:0 none;width:auto;display:inline-block;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-font-smoothing:antialiased;}
.buttons{margin:0 0 25px 0;}
input[type=button]:hover{background:#dadada;}
/********************************************************** * THEME:"default" * **********************************************************/
.selectize-control.default.multi .selectize-input > div{color:#3d5d18;text-shadow:0 1px 0 rgba(255,255,255,0.1);border:1px solid #74b21e;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#b8e76f;background:-moz-linear-gradient(top,#b8e76f 0%,#a9e25c 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#b8e76f),color-stop(100%,#a9e25c));background:-webkit-linear-gradient(top,#b8e76f 0%,#a9e25c 100%);background:-o-linear-gradient(top,#b8e76f 0%,#a9e25c 100%);background:-ms-linear-gradient(top,#b8e76f 0%,#a9e25c 100%);background:linear-gradient(to bottom,#b8e76f 0%,#a9e25c 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e76f',endColorstr='#a9e25c',GradientType=0 );-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.1);box-shadow:0 1px 1px rgba(0,0,0,0.1);}
.selectize-control.default.multi .selectize-input > div.active{border-color:#6f9839;background:#92c836;background:-moz-linear-gradient(top,#92c836 0%,#006e2e 0%,#92c836 0%,#7abc2c 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#92c836),color-stop(0%,#006e2e),color-stop(0%,#92c836),color-stop(100%,#7abc2c));background:-webkit-linear-gradient(top,#92c836 0%,#006e2e 0%,#92c836 0%,#7abc2c 100%);background:-o-linear-gradient(top,#92c836 0%,#006e2e 0%,#92c836 0%,#7abc2c 100%);background:-ms-linear-gradient(top,#92c836 0%,#006e2e 0%,#92c836 0%,#7abc2c 100%);background:linear-gradient(to bottom,#92c836 0%,#006e2e 0%,#92c836 0%,#7abc2c 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#92c836',endColorstr='#7abc2c',GradientType=0 );}
.selectize-control.default.multi .selectize-input.disabled > div{border-color:#d8d8d8;background:#fafafa;}
/********************************************************** * BASIC AESTHETIC STYLES (common) * **********************************************************/
.selectize-input,.selectize-control.single .selectize-input.focus{background:#fff;padding:10px;cursor:text;display:inline-block;width:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);}
.selectize-input.focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);}
.selectize-input.dropdown-active{-webkit-border-radius:3px 3px 0 0 !important;-moz-border-radius:3px 3px 0 0 !important;border-radius:3px 3px 0 0 !important;}
.selectize-input.full{background-color:#f2f2f2;}
.selectize-input.dropdown-active::before{content:' ';display:block;position:absolute;background:#f2f2f2;height:1px;bottom:0;left:0;right:0;}
.selectize-control.multi .selectize-input.has-items{padding-top:8px !important;padding-bottom:3px !important;}
.selectize-control.multi .selectize-input > div{cursor:pointer;margin:0 5px 5px 0;padding:1px 5px;}
.selectize-input > div:last-child{margin-right:5px;}
.selectize-input > input{margin-right:2px !important;}
.selectize-dropdown,.selectize-input,.selectize-control.single .selectize-input.dropdown-active{border:1px solid #aeb8ba;}
.selectize-dropdown{max-height:200px;overflow-y:auto;overflow-x:hidden;background:#fff;margin-top:-1px;border-top:0 none;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}
.selectize-dropdown [data-selectable],.selectize-dropdown .optgroup-header{padding:6px 9px;}
.selectize-dropdown .optgroup:first-child .optgroup-header{border-top:0 none;}
.selectize-dropdown .optgroup-header{background:#fafafa;border-bottom:1px solid #e8e8e8;border-top:1px solid #e8e8e8;font-weight:bold;font-size:0.8em;cursor:default;}
.selectize-dropdown .create{color:#a0a0a0;}
.selectize-dropdown .active{background-color:#fffceb;}
.selectize-dropdown,.selectize-input,.selectize-input input{color:#303030;font-family:'Open Sans',Helvetica,arial,sans-serif;font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased;}
.selectize-dropdown [data-selectable] .highlight{background:rgba(255,237,40,0.4);border-radius:1px;}
.selectize-input.disabled,.selectize-input.disabled *{cursor:default !important;}
/********************************************************** * BASIC AESTHETIC STYLES (single) * **********************************************************/
.selectize-control.single .selectize-input{cursor:pointer;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),0 2px 0 #dbdedf;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),0 2px 0 #dbdedf;box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),0 2px 0 #dbdedf,0 3px 0 #b7c2c4,0 4px 1px rgba(0,0,0,0.1);background:#f6f6f6;background:-moz-linear-gradient(top,#f5f5f5 0%,#efefef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5f5f5),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#f5f5f5 0%,#efefef 100%);background:-o-linear-gradient(top,#f5f5f5 0%,#efefef 100%);background:-ms-linear-gradient(top,#f5f5f5 0%,#efefef 100%);background:linear-gradient(to bottom,#fff 0%,#f3f5f6 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6',endColorstr='#e8e8e8',GradientType=0 );}
.selectize-control.single .selectize-input::after{content:' ';display:block;position:absolute;top:50%;right:15px;margin-top:-2px;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#808080 transparent transparent transparent;}
.selectize-control.single .selectize-input.dropdown-active::after{margin-top:-3px;border-width:0 5px 5px 5px;border-color:transparent transparent #808080 transparent;}
.selectize-control.single .selectize-input.disabled{opacity:0.5;}
/********************************************************** * BASIC AESTHETIC STYLES (multi) * **********************************************************/
.selectize-control.multi .selectize-input.disabled{background-color:#fafafa;}
/********************************************************** * LAYOUT STYLES (mandatory) * **********************************************************/
.selectize-control{position:relative;}
.selectize-input{overflow:hidden;position:relative;z-index:1;}
.selectize-input:after{content:' ';display:block;clear:left;}
.selectize-input .items{display:inline;}
.selectize-input > *{vertical-align:baseline;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;}
.selectize-input > input{max-width:100% !important;text-indent:0 !important;border:0 none !important;background:none !important;padding:0 !important;margin:0;line-height:inherit !important;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;}
.selectize-input > input:focus{outline:none !important;}
.selectize-dropdown{position:absolute;z-index:2;}
.selectize-dropdown > *{cursor:pointer;overflow:hidden;}
.selectize-input,.selectize-dropdown{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/** * Github Demo */
.selectize-control.repositories .selectize-dropdown [data-selectable]{border-bottom:1px solid rgba(0,0,0,0.05);}
.selectize-control.repositories .selectize-dropdown .by{font-size:11px;opacity:0.8;}
.selectize-control.repositories .selectize-dropdown .by::before{content:'by';}
.selectize-control.repositories .selectize-dropdown .name{font-weight:bold;margin-right:5px;}
.selectize-control.repositories .selectize-dropdown .title{display:block;}
.selectize-control.repositories .selectize-dropdown .description{font-size:12px;display:block;color:#a0a0a0;white-space:nowrap;width:100%;text-overflow:ellipsis;overflow:hidden;}
.selectize-control.repositories .selectize-dropdown .meta{list-style:none;margin:0;padding:0;font-size:10px;}
.selectize-control.repositories .selectize-dropdown .meta li{margin:0;padding:0;display:inline;margin-right:10px;}
.selectize-control.repositories .selectize-dropdown .meta li span{font-weight:bold;}
.selectize-control.repositories::before{-moz-transition:opacity 0.2s;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;content:' ';z-index:2;position:absolute;display:block;top:12px;right:34px;width:16px;height:16px;background:url(spinner.gif);background-size:16px 16px;opacity:0;}
.selectize-control.repositories.loading::before{opacity:0.4;}
.icon{width:16px;height:16px;display:inline-block;vertical-align:middle;background-size:16px 16px;margin:0 3px 0 0;}
.icon.fork{background-image:url(repo-fork.png);}
.icon.source{background-image:url(repo-source.png);}
/** * Rotton Tomatoes Demo */
.selectize-control.movies .selectize-dropdown [data-selectable]{border-bottom:1px solid rgba(0,0,0,0.05);height:60px;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box;padding:10px 10px 10px 60px;}
.selectize-control.movies .selectize-dropdown [data-selectable]:last-child{border-bottom:0 none;}
.selectize-control.movies .selectize-dropdown .by{font-size:11px;opacity:0.8;}
.selectize-control.movies .selectize-dropdown .by::before{content:'by';}
.selectize-control.movies .selectize-dropdown .name{font-weight:bold;margin-right:5px;}
.selectize-control.movies .selectize-dropdown .description{font-size:12px;color:#a0a0a0;}
.selectize-control.movies .selectize-dropdown .actors,.selectize-control.movies .selectize-dropdown .description,.selectize-control.movies .selectize-dropdown .title{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}
.selectize-control.movies .selectize-dropdown .actors{font-size:10px;color:#a0a0a0;}
.selectize-control.movies .selectize-dropdown .actors span{color:#606060;}
.selectize-control.movies .selectize-dropdown img{height:60px;left:10px;position:absolute;border-radius:3px;background:rgba(0,0,0,0.04);}
.selectize-control.movies .selectize-dropdown .meta{list-style:none;margin:0;padding:0;font-size:10px;}
.selectize-control.movies .selectize-dropdown .meta li{margin:0;padding:0;display:inline;margin-right:10px;}
.selectize-control.movies .selectize-dropdown .meta li span{font-weight:bold;}
.selectize-control.movies::before{-moz-transition:opacity 0.2s;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;content:' ';z-index:2;position:absolute;display:block;top:12px;right:34px;width:16px;height:16px;background:url(spinner.gif);background-size:16px 16px;opacity:0;}
.selectize-control.movies.loading::before{opacity:0.4;}
/** * Email Contacts */
.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;}
/* --- file:"src/plugins/remove_button/plugin.css" --- */
.selectize-control.plugin-remove_button .item{position:relative;padding-right:24px !important;}
.selectize-control.plugin-remove_button .item .remove{position:absolute;top:0;right:0;bottom:0;width:17px;-moz-sizing:border-box;-webkit-sizing:border-box;box-sizing:border-box;text-align:center;font-size:12px;font-weight:bold;color:inherit;vertical-align:middle;display:inline-block;padding:7px 0 0 0;line-height:8px;-webkit-border-radius:0 2px 2px 0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;border-left:1px solid #74b21e;}
.selectize-control.plugin-remove_button .item .remove:hover{border-left-color:#5e8f1a;background:rgba(50,90,0,0.15);}
/* --- file:"src/plugins/optgroup_columns/plugin.css" --- */
.selectize-control.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;float:left;-webkit-box-sizing:border-box;box-sizing:border-box;}
.selectize-control.plugin-optgroup_columns .optgroup:last-child{border-right:0 none;}
.selectize-control.plugin-optgroup_columns .optgroup-header{border-top:0 none;}
/* --- file:"src/plugins/drag_drop/plugin.css" --- */
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder{visibility:visible !important;background:#f2f2f2 !important;background:rgba(0,0,0,0.06) !important;border:0 none !important;-webkit-box-shadow:inset 0 0 12px 4px #fff;-moz-box-shadow:inset 0 0 12px 4px #fff;box-shadow:inset 0 0 12px 4px #fff;}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{content:'!';visibility:hidden;}
.selectize-control.plugin-drag_drop .ui-sortable-helper{-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2) !important;-moz-box-shadow:0 2px 5px rgba(0,0,0,0.2) !important;box-shadow:0 2px 5px rgba(0,0,0,0.2) !important;}

附件:下载该文件资源,减少时间成本(增值服务)