|
2 | 2 | <h1 id="tags">Tagging support</h1> |
3 | 3 |
|
4 | 4 | <p> |
5 | | - Select2 can be used to quickly set up fields used for tagging. |
6 | | - </p> |
7 | | - |
8 | | - <p> |
9 | | - Note that when tagging is enabled the user can select from pre-existing |
10 | | - options or create a new tag by picking the first choice, which is what |
11 | | - the user has typed into the search box so far. |
| 5 | + In addition to the dropdown menu of options, Select2 can also allow free-text responses. This feature is called "tagging". To enable free-text responses, set the <code>tags</code> option to <code>true</code>: |
12 | 6 | </p> |
13 | 7 |
|
14 | 8 | <div class="s2-example"> |
15 | 9 | <p> |
16 | | - <select class="js-example-tags-multiple form-control" multiple="multiple"> |
| 10 | + <select class="js-example-tags form-control"> |
17 | 11 | <option selected="selected">orange</option> |
18 | 12 | <option>white</option> |
19 | | - <option selected="selected">purple</option> |
| 13 | + <option>purple</option> |
20 | 14 | </select> |
21 | 15 | </p> |
22 | 16 | </div> |
23 | 17 |
|
24 | 18 | {% highlight js linenos %} |
25 | | -$(".js-example-tags-multiple").select2({ |
| 19 | +$(".js-example-tags").select2({ |
26 | 20 | tags: true |
27 | 21 | }) |
28 | 22 | {% endhighlight %} |
29 | | - |
| 23 | + |
| 24 | + <p> |
| 25 | + Note that when tagging is enabled the user can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far. |
| 26 | + </p> |
| 27 | + |
| 28 | + <h2>Tagging with multi-value select boxes</h2> |
| 29 | + |
30 | 30 | <p> |
31 | | - Tagging can also be used on a single select element. Simply remove the |
32 | | - <code>multiple="multiple"</code> attribute from your HTML markup. |
| 31 | + Tagging can also be used in multi-value select boxes. In the example below, we set the <code>multiple="multiple"</code> attribute on a Select2 control that also has <code>tags: true</code> enabled: |
33 | 32 | </p> |
34 | 33 |
|
35 | 34 | <div class="s2-example"> |
36 | 35 | <p> |
37 | | - <select class="js-example-tags form-control"> |
| 36 | + <select class="js-example-tags form-control" multiple="multiple"> |
38 | 37 | <option selected="selected">orange</option> |
39 | 38 | <option>white</option> |
40 | | - <option>purple</option> |
| 39 | + <option selected="selected">purple</option> |
41 | 40 | </select> |
42 | 41 | </p> |
43 | 42 | </div> |
44 | 43 |
|
45 | | -{% highlight js linenos %} |
46 | | -$(".js-example-tags").select2({ |
47 | | - tags: true |
48 | | -}) |
49 | | -{% endhighlight %} |
50 | | - |
| 44 | + <p> |
| 45 | + Try entering a value that isn't listed in the dropdown - you'll be able to add it as a new option! |
| 46 | + </p> |
51 | 47 | </section> |
0 commit comments