Select2 Appear Like Text Input Example

Using the select2 plugin to only display as a text input rather than a dropdown.

by Jens Kühn

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.8/select2.css">
<script src="//cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<h3>Zeitreihengruppe:</h3>
<select class="js-example-basic-single" tabindex="-1" aria-hidden="true">
	<optgroup label="Arnoldstein">
		<option title="Entry Arnoldstein DZK" value="251" selected="selected">Entry Arnoldstein DZK</option>
		<option title="Entry Arnoldstein FZK" value="118">Entry Arnoldstein FZK</option>
		<option title="Entry Arnoldstein Kapazität auf Jahresbasis" value="152">Entry Arnoldstein Kapazität auf Jahresbasis</option>
		<option title="Entry Arnoldstein UK" value="252">Entry Arnoldstein UK</option>
		<option title="Exit Arnoldstein DZK" value="270">Exit Arnoldstein DZK</option>
		<option title="Exit Arnoldstein FZK" value="119">Exit Arnoldstein FZK</option>
		<option title="Exit Arnoldstein Kapazität auf Jahresbasis" value="161">Exit Arnoldstein Kapazität auf Jahresbasis</option>
		<option title="Exit Arnoldstein UK" value="271">Exit Arnoldstein UK</option>
	</optgroup>
	<optgroup label="Baumgarten">
		<option title="Entry Baumgarten GCA Kapazität auf Jahresbasis" value="154">Entry Baumgarten GCA Kapazität auf Jahresbasis</option>
		<option title="Entry Baumgarten GCA Nutzung (Summe)" value="309">Entry Baumgarten GCA Nutzung (Summe)</option>
		<option title="Entry Baumgarten GCA UK" value="257">Entry Baumgarten GCA UK</option>
		<option title="Entry Baumgarten GCA fest" value="101">Entry Baumgarten GCA fest</option>
		<option title="Entry Baumgarten TAG DZK" value="258">Entry Baumgarten TAG DZK</option>
		<option title="Entry Baumgarten TAG FZK" value="117">Entry Baumgarten TAG FZK</option>
		<option title="Entry Baumgarten TAG Kapazität auf Jahresbasis" value="155">Entry Baumgarten TAG Kapazität auf Jahresbasis</option>
		<option title="Entry Baumgarten TAG UK" value="259">Entry Baumgarten TAG UK</option>
		<option title="Entry Baumgarten WAG DZK" value="254">Entry Baumgarten WAG...

JavaScript

$(".js-example-basic-single").select2({
		width: '50%',
    height: '350px'
    }
);