Start again

vendors/select2/docs/_includes/options/selections/clearing-selections.html

@@ -0,0 +1,34 @@
+<section>
+  <h2 id="allowClear">
+    Can I allow users to clear their selections?
+  </h2>
+
+  <p>
+    You can allow people to clear their current selections with the <code>allowClear</code> option when initializing Select2. Setting this option to <code>true</code> will enable an "x" icon that will reset the selection to the placeholder.
+  </p>
+
+{% highlight js linenos %}
+$('select').select2({
+  placeholder: 'This is my placeholder',
+  allowClear: true
+});
+{% endhighlight %}
+
+  <h3>
+    Why is a placeholder required?
+  </h3>
+
+  {% include options/not-written.html %}
+
+  <h3>
+    The "x" icon is not clearing the selection
+  </h3>
+
+  {% include options/not-written.html %}
+
+  <h3>
+    Can users remove all of their selections in a multiple select at once?
+  </h3>
+
+  {% include options/not-written.html %}
+</section>

vendors/select2/docs/_includes/options/selections/multiple.html

@@ -0,0 +1,17 @@
+<section>
+  <h2 id="multiple">
+    Can I allow users to make multiple selections?
+  </h2>
+
+  <p>
+    Yes, Select2 supports making multiple selections through the use of the <code>multiple</code> option that can be passed in when initializing Select2.
+  </p>
+
+  <h3>
+    Can the <code>multiple</code> attribute be used on my <code>&lt;select&gt;</code> element?
+  </h3>
+
+  <p>
+    Yes, Select2 will automatically map the value of the <code>multiple</code> attribute to the <code>multiple</code> option during initialization.
+  </p>
+</section>

vendors/select2/docs/_includes/options/selections/placeholder.html

@@ -0,0 +1,84 @@
+<section>
+  <h2 id="placeholder">
+    How can I have Select2 display a placeholder?
+  </h2>
+
+  <p>
+    Select2 supports displaying a placeholder by default using the <code>placeholder</code> option. This can be either a data object matching the placeholder option, or a string to display as the placeholder if you are using a blank placeholder option.
+  </p>
+
+{% highlight js linenos %}
+$('select').select2({
+  placeholder: 'Select an option'
+});
+{% endhighlight %}
+
+  <h3>
+    My first option is being displayed instead of my placeholder
+  </h3>
+
+  <p>
+    This usually means that you do not have a blank <code>&lt;option&gt;&lt/option&gt;</code> as the first option in your <code>&lt;select&gt;</code>.
+  </p>
+
+  <p>
+    Note that this does not apply to multiple selects, as the browser does not select the first option by default when multiple selections can be made.
+  </p>
+
+  <h3>
+    I am using AJAX, can I still show a placeholder?
+  </h3>
+
+  <p>
+    Yes, Select2 supports placeholders for all configurations. You will still need to add in the placeholder option if you are using a single select.
+  </p>
+
+  <h3>
+    Can I use an option without a blank value as my placeholder?
+  </h3>
+
+  <p>
+    The <code>placeholder</code> option allows you to pass in a data object instead of just a string if you need more flexibility. The <code>id</code> of the data object should match the <code>value</code> of the placeholder option.
+  </p>
+
+{% highlight js linenos %}
+$('select').select2({
+  placeholder: {
+    id: '-1', // the value of the option
+    text: 'Select an option'
+  }
+});
+{% endhighlight %}
+
+  <h3>
+    Can I change how the placeholder looks?
+  </h3>
+
+  <p>
+    When using Select2 <strong>when only a single selection can be made</strong>, the placeholder option will be passed through the standard templating methods, including the <code>templateSelection</code> option, so you are able to change how it is displayed.
+  </p>
+
+{% highlight js linenos %}
+$('select').select2({
+  templateResult: function (data) {
+    if (data.id === '') { // adjust for custom placeholder values
+      return 'Custom styled placeholder text';
+    }
+
+    return data.text;
+  }
+});
+{% endhighlight %}
+
+  <p>
+    <strong>When multiple selections are allowed</strong>, the placeholder will be displayed using the <code>placeholder</code> attribute on the search box. You can cusotmize the display of this placholder using CSS, as explained in the following Stack Overflow answer: <a href="http://stackoverflow.com/q/2610497/359284">Change an input's HTML5 placeholder color with CSS</a>
+  </p>
+
+  <h3>
+    My placeholders aren&apos;t being displayed in Internet Explorer
+  </h3>
+
+  <p>
+    Select2 uses the native <code>placeholder</code> attribute on input boxes for the multiple select, and that attribute is not supported in older versions of Internet Explorer. You need to include <a href="https://github.com/jamesallardice/Placeholders.js">Placeholders.js</a> on your page, or use the full build, in order to add <code>placeholder</code> attribute support to input boxes.
+  </p>
+</section>

vendors/select2/docs/_includes/options/selections/templating.html

@@ -0,0 +1,37 @@
+<section>
+  <h2 id="templateSelection">
+    How can I customize the way selections are displayed?
+  </h2>
+
+  <p>
+    When a selection is made by the user Select2 will display the text of the option by default, just like how it is displayed in a standard select box.  You can override the display of the selection by setting the <code>templateSelection</code> option to a JavaScript function.
+  </p>
+
+{% highlight js linenos %}
+function template(data, container) {
+  return data.text;
+}
+
+$('select').select2({
+  templateSelection: template
+});
+{% endhighlight %}
+
+  <h3>
+    Nothing is being displayed when I select an option
+  </h3>
+
+  {% include options/not-written.html %}
+
+  <h3>
+    I am using HTML in my selection template but it isn't displaying it
+  </h3>
+
+  {% include options/not-written.html %}
+
+  <h3>
+    How can I access the container where the selection is displayed?
+  </h3>
+
+  {% include options/not-written.html %}
+</section>