40 lines
1.0 KiB
HTML
40 lines
1.0 KiB
HTML
|
<section>
|
||
|
|
<h1 id="matcher">Customizing how results are matched</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>
|
||
|
|
|
||
|
|
{% highlight js linenos %}
|
||
|
|
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)
|
||
|
|
})
|
||
|
|
});
|
||
|
|
{% endhighlight %}
|
||
|
|
</section>
|