|
@@ -4,9 +4,21 @@
|
|
</h2>
|
|
</h2>
|
|
|
|
|
|
<p>
|
|
<p>
|
|
- Yes, but only when you are initially creating it.
|
|
|
|
|
|
+ While Select2 is designed to be used with a <code><select></code> tag, the data that is used to search through and display the results can be loaded from a JavaScript array using the <code>data</code> option. This option should be passed in during the initialization of Select2.
|
|
</p>
|
|
</p>
|
|
|
|
|
|
|
|
+<pre class="prettyprint linenums">
|
|
|
|
+$('select').select2({
|
|
|
|
+ data: [
|
|
|
|
+ {
|
|
|
|
+ id: 'value',
|
|
|
|
+ text: 'Text to display'
|
|
|
|
+ },
|
|
|
|
+ // ... more data objects ...
|
|
|
|
+ ]
|
|
|
|
+});
|
|
|
|
+</pre>
|
|
|
|
+
|
|
<h3>
|
|
<h3>
|
|
What properties are required on the objects passed in to the array?
|
|
What properties are required on the objects passed in to the array?
|
|
</h3>
|
|
</h3>
|
|
@@ -19,12 +31,29 @@
|
|
How should nested results be formatted?
|
|
How should nested results be formatted?
|
|
</h3>
|
|
</h3>
|
|
|
|
|
|
|
|
+ <p>
|
|
|
|
+ Nested results should be specified using the <code>children</code> property on the data objects that are passed in. This <code>children</code> property should be an array of data objects that are grouped under this option, and the label for the group should be specified as the <code>text</code> property on the root data object.
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+<pre class="prettyprint linenums">
|
|
|
|
+{
|
|
|
|
+ text: 'Group label',
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ id: 'nested-1',
|
|
|
|
+ text: 'First nested option'
|
|
|
|
+ },
|
|
|
|
+ // ... more data objects ...
|
|
|
|
+ ]
|
|
|
|
+}
|
|
|
|
+</pre>
|
|
|
|
+
|
|
<h3>
|
|
<h3>
|
|
How many levels of nesting are allowed?
|
|
How many levels of nesting are allowed?
|
|
</h3>
|
|
</h3>
|
|
|
|
|
|
<p>
|
|
<p>
|
|
- Because Select2 falls back to an <code><optgroup></code> when creating nested options, only a single level of nesting can be supported.
|
|
|
|
|
|
+ Because Select2 falls back to an <code><optgroup></code> when creating nested options, only <a href="#how-many-levels-of-nesting-can-there-be">a single level of nesting</a> is supported. Any additional levels of nesting is not guarenteed to be displayed properly across all browsers and devices.
|
|
</p>
|
|
</p>
|
|
|
|
|
|
<h3>
|
|
<h3>
|
|
@@ -35,6 +64,8 @@
|
|
The <code>data</code> option is a shortcut that Select2 provides which allows you to load options into your <code>select</code> from a data array.
|
|
The <code>data</code> option is a shortcut that Select2 provides which allows you to load options into your <code>select</code> from a data array.
|
|
</p>
|
|
</p>
|
|
|
|
|
|
|
|
+ {% include options/not-written.html %}
|
|
|
|
+
|
|
<h3>
|
|
<h3>
|
|
My objects don't use <code>id</code> for their unique identifiers, what can I do?
|
|
My objects don't use <code>id</code> for their unique identifiers, what can I do?
|
|
</h3>
|
|
</h3>
|
|
@@ -43,6 +74,8 @@
|
|
You can re-map your identifier before passing it to Select2.
|
|
You can re-map your identifier before passing it to Select2.
|
|
</p>
|
|
</p>
|
|
|
|
|
|
|
|
+ {% include options/not-written.html %}
|
|
|
|
+
|
|
<h3>
|
|
<h3>
|
|
My objects use a property other than <code>text</code> for the text that needs to be displayed
|
|
My objects use a property other than <code>text</code> for the text that needs to be displayed
|
|
</h3>
|
|
</h3>
|
|
@@ -50,4 +83,6 @@
|
|
<p>
|
|
<p>
|
|
These can also be re-mapped.
|
|
These can also be re-mapped.
|
|
</p>
|
|
</p>
|
|
|
|
+
|
|
|
|
+ {% include options/not-written.html %}
|
|
</section>
|
|
</section>
|