44 lines
1.1 KiB
HTML
44 lines
1.1 KiB
HTML
|
<section>
|
||
|
|
|
||
|
|
<h1 id="matcher">Custom matcher</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Unlike other dropdowns on this page, this one matches options only if
|
||
|
|
the term appears in the beginning of the string as opposed to anywhere:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
This custom matcher uses a
|
||
|
|
<a href="options.html#compat-matcher">compatibility module</a> that is
|
||
|
|
only bundled in the
|
||
|
|
<a href="index.html#builds-full">full version of Select2</a>. You also
|
||
|
|
have the option of using a
|
||
|
|
<a href="options.html#matcher">more complex matcher</a>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="s2-example">
|
||
|
|
<p>
|
||
|
|
<select class="js-example-matcher-start js-states form-control"></select>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<pre data-fill-from=".js-code-matcher-start"></pre>
|
||
|
|
|
||
|
|
<script type="text/x-example-code" class="js-code-matcher-start">
|
||
|
|
function matchStart (term, text) {
|
||
|
|
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||
|
|
$(".js-example-matcher-start").select2({
|
||
|
|
matcher: oldMatcher(matchStart)
|
||
|
|
})
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</section>
|