RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 13:06:08 +03:00
Code Issues Projects Releases Wiki Activity

add a tokenizer so choices can be automatically created and selected while user is typing or pasting into the field. fixes #101 #81 #292

Browse Source
This commit is contained in:
Igor Vaynberg 2012-08-08 19:33:40 -07:00
parent 697d3d6231
commit c655a48843
2 changed files with 60 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
select2-latest.html
View File

@ -642,11 +642,11 @@ $("#e11_2")
</div>
</article>
<article class="row" id="tags">
<script id="script_e12">
$(document).ready(function () {
$("#e12").select2({tags:["red", "green", "blue"]});
});
</script>
<script id="script_e12">
$(document).ready(function () {
$("#e12").select2({tags:["red", "green", "blue"]});
});
</script>
<div class="span4">
<h3>Tagging Support</h3>
@ -662,7 +662,31 @@ $("#e12").select2({tags:["red", "green", "blue"]});
</pre>
</div>
</article>
<article class="row" id="token">
<script id="script_e20">
$(document).ready(function () {
$("#e20").select2({
tags:["red", "green", "blue"],
tokenSeparators: [",", " "]});
});
</script>
<div class="span4">
<h3>Auto Tokenization</h3>
<p>Select2 supports ability to add choices automatically as the user is typing into the search field.
This is especially convenient in the tagging usecase where the user can quickly enter a number of tags
by separating them with a comma or a space. Try typing in the search field below and entering a space or a comma</p>
<p><input type="hidden" id="e20" style="width:300px" value="brown"/></p>
<p>Note that the separators are defined in the <a href="#doc-tokenSeparators">tokenSeparators</a> option</code></p>
<p>Note that this example uses the built in <a href="#doc-tokenizer">tokenizer</a> function, but a custom one can be provided in the options.</p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e20">
</pre>
</div>
</article>
<article class="row" id="event_ext_change">
<script id="script_e13">
$(document).ready(function () {
@ -1096,6 +1120,36 @@ $("#tags").select2({
});
</pre>
</td></tr>
<tr id="doc-tokenizer"><td>tokenizer</td><td>function</td><td>
A tokenizer function can process the input typed into the search field after every keystroke and extract
and select choices. This is useful, for example, in tagging scenarios where the user can create tags quickly
by separating them with a comma or a space instead of pressing enter.
<p class="alert alert-info">Tokenizer only applies to multi-selects</p>
<pre>tokenizer(input, selection, selectCallback, opts)</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>input</td><td>string</td><td>The text entered into the search field so far</td></tr>
<tr><td>selection</td><td>array</td><td>Array of objects representing the current selection.
Useful if tokenizer needs to filter out duplicates.</td></tr>
<tr><td>selectCallback</td><td>function</td><td>Callback that can be used to add objects to the selection</td></tr>
<tr><td>opts</td><td>object</td><td>Options with which Select2 was initialized. Useful if tokenizer needs to access some properties in the options.</td></tr>
<tr><td>&lt;returns&gt;</td><td>string (optional)</td><td>Returns the string to which the input of
the search field should be set to. Usually this is the remainder, of any, of the string after
the tokens have been stripped. If <code>undefined</code> or <code>null</code> is returned the
input of the search field is unchanged.</code></td></tr>
</table>
The default tokenizer will only be used if the <code>tokenSeparators</code> and <code>createSearchChoice</code>
options are specified. The default tokenizer will split the string using any separator in <code>tokenSeparators</code>
and will create and select choice objects using <code>createSearhChoice</code> option. It will also
ignore duplicates, silently swallowing those tokens.
</td></tr>
<tr id="doc-tokenSeparators"><td>tokenSeparators</td><td>array</td><td>
An array of strings that define token separators for the default <a href="doc-tokenizer">tokenizer</a>
function. By default, this option is set to an empty array which means tokenization using the default
tokenizer is disabled. Usually it is sensible to set this option to a value similar to <code>[',', ' ']</code>
</td></tr>
<tr id="doc-query">
<td>query</td>
<td>function</td>

2
select2-master

@ -1 +1 @@
Subproject commit 4d3f8b6332c2ac80aa6c05bf83ec9e1e367061bc
Subproject commit 289226cf6c925d7702336a5887a642750a016b58