Skip to content

Commit 22ac9d5

Browse files
committed
clarify exactly what "tagging" is
1 parent b0e5197 commit 22ac9d5

2 files changed

Lines changed: 18 additions & 22 deletions

File tree

docs/_includes/examples/tags.html

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,46 @@
22
<h1 id="tags">Tagging support</h1>
33

44
<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>:
126
</p>
137

148
<div class="s2-example">
159
<p>
16-
<select class="js-example-tags-multiple form-control" multiple="multiple">
10+
<select class="js-example-tags form-control">
1711
<option selected="selected">orange</option>
1812
<option>white</option>
19-
<option selected="selected">purple</option>
13+
<option>purple</option>
2014
</select>
2115
</p>
2216
</div>
2317

2418
{% highlight js linenos %}
25-
$(".js-example-tags-multiple").select2({
19+
$(".js-example-tags").select2({
2620
tags: true
2721
})
2822
{% 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+
3030
<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:
3332
</p>
3433

3534
<div class="s2-example">
3635
<p>
37-
<select class="js-example-tags form-control">
36+
<select class="js-example-tags form-control" multiple="multiple">
3837
<option selected="selected">orange</option>
3938
<option>white</option>
40-
<option>purple</option>
39+
<option selected="selected">purple</option>
4140
</select>
4241
</p>
4342
</div>
4443

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>
5147
</section>

docs/_includes/nav/examples.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</ul>
5252
</li>
5353
<li>
54-
<a href="#tags">Tagging support</a>
54+
<a href="#tags">Tagging (free-text) support</a>
5555
</li>
5656
<li>
5757
<a href="#tokenizer">Automatic tokenization</a>

0 commit comments

Comments
 (0)