---
title: Item Creation Examples
nav_title: Item Creation
tags: demo
---


{% from "demo.njk" import demo %}


{% set label %}
<label class="h2 mb-3">
	Regex Filter
</label>
{% endset %}

{% set html %}
<select id="select-words-regex" multiple placeholder="Enter a word matching the pattern..."></select>
<div class="control-group form-inline">
	<label for="regex" class="me-2">Pattern</label>
	<input type="text" id="regex" value="^a+$" class="form-control">
</div>
{% endset %}

<script>
{% set script %}
new TomSelect('#select-words-regex',{
	create: true,
	createFilter: document.getElementById('regex').value,
});
{% endset %}
</script>

{{ demo( label, html, script, style) }}

{% set label %}
<label class="h2 mb-3">
	Minimum Length
</label>
{% endset %}

{% set html %}
<select id="select-words-length" multiple placeholder="Enter a word longer than the minimum number of characters..."></select>
<div class="control-group form-inline">
	<label for="length" class="me-2">Minimum length</label>
	<input id="length" value="2" class="form-control" />
</div>
{% endset %}

<script>
{% set script %}
new TomSelect('#select-words-length',{
	create: true,
	createFilter: function(input) { return input.length >= parseInt( document.getElementById('length').value, 10); }
});
{% endset %}
</script>

{{ demo( label, html, script, style) }}


{% set label %}
<label class="h2 mb-3">
	Unique Words
</label>
{% endset %}

{% set html %}
<select id="select-words-unique" multiple placeholder="Enter unique words (case-insensitive)..."></select>
{% endset %}

<script>
{% set script %}
var unique = new TomSelect('#select-words-unique',{
	create: true,
	createFilter: function(input) {
		input = input.toLowerCase();
		return !(input in this.options);
	}
});
{% endset %}
</script>

{{ demo( label, html, script, style) }}