Combobox test 5 - Datalist JSON suggestion - Research and finding

• Edit this page
• Revision history
• Questions or comments?

Combobox with limiting number of result and type of filter.

Note: The template need to be defined outside the select element because of IE11 don't support the template element

Limit to 4 item

Limit to 10 items

Any - Filter type

Start with - Filter type

Word - Filter type

Source code

<h2>Limit to 4 item</h2>
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example1">
		<div class="form-group">
			<label for="ex_field_id_1">Please choose a task:</label>
			<select id="ex_field_id_1" class="wb-combobox" required name="selectName" data-wb5-template="ex_template_id_1" data-wb-limit="4" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
				<option value="Lorem">Lorem</option>
				<option value="ipsum">ipsum</option>
				<option value="dolor">dolor</option>
				<option value="sit">sit</option>
			</select>
			<template id="ex_template_id_1">
				<ul class="list-unstyled">
					<li class="brdr-bttm" role="option" data-wb5-for="option in select.options" data-wb5-selectvalue="{{option.value}}">{{ option.textContent }}</li>
					<li class="brdr-bttm" role="option" data-wb5-for="autofillItem in wbLoad" data-wb5-selectvalue="{{autofillItem.task}}">{{ autofillItem.task }}</li>
				</ul>
				<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
			</template>
		</div>
		<button type="submit">Submit</button>
	</form>
</div>

<h2>Limit to 10 items</h2>
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example2">
		<div class="form-group">
			<label for="ex_field_id_2">Please choose a task:</label>
			<select id="ex_field_id_2" class="wb-combobox" required name="selectName" data-wb5-template="ex_template_id_2" data-wb-limit="10" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
				<option value="Lorem">Lorem</option>
				<option value="ipsum">ipsum</option>
				<option value="dolor">dolor</option>
				<option value="sit">sit</option>
			</select>
			<template id="ex_template_id_2">
				<ul class="list-unstyled">
					<li class="brdr-bttm" role="option" data-wb5-for="option in select.options" data-wb5-selectvalue="{{option.value}}">{{ option.textContent }}</li>
					<li class="brdr-bttm" role="option" data-wb5-for="autofillItem in wbLoad" data-wb5-selectvalue="{{autofillItem.task}}">{{ autofillItem.task }}</li>
				</ul>
				<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
			</template>
		</div>
		<button type="submit">Submit</button>
	</form>
</div>

<h2>Any - Filter type</h2>
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example3">
		<div class="form-group">
			<label for="ex_field_id_3">Please choose a task:</label>
			<select id="ex_field_id_3" class="wb-combobox" required name="selectName" data-wb5-template="ex_template_id_3" data-wb-filter-type="any" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
				<option value="Lorem">Lorem</option>
				<option value="ipsum">ipsum</option>
				<option value="dolor">dolor</option>
				<option value="sit">sit</option>
			</select>
			<template id="ex_template_id_3">
				<ul class="list-unstyled">
					<li class="brdr-bttm" role="option" data-wb5-for="option in select.options" data-wb5-selectvalue="{{option.value}}">{{ option.textContent }}</li>
					<li class="brdr-bttm" role="option" data-wb5-for="autofillItem in wbLoad" data-wb5-selectvalue="{{autofillItem.task}}">{{ autofillItem.task }}</li>
				</ul>
				<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
			</template>
		</div>
		<button type="submit">Submit</button>
	</form>
</div>

<h2>Start with - Filter type</h2>
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example4">
		<div class="form-group">
			<label for="ex_field_id_4">Please choose a task:</label>
			<select id="ex_field_id_4" class="wb-combobox" required name="selectName" data-wb5-template="ex_template_id_4" data-wb-filter-type="startWith" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
				<option value="Lorem">Lorem</option>
				<option value="ipsum">ipsum</option>
				<option value="dolor">dolor</option>
				<option value="sit">sit</option>
			</select>
			<template id="ex_template_id_4">
				<ul class="list-unstyled">
					<li class="brdr-bttm" role="option" data-wb5-for="option in select.options" data-wb5-selectvalue="{{option.value}}">{{ option.textContent }}</li>
					<li class="brdr-bttm" role="option" data-wb5-for="autofillItem in wbLoad" data-wb5-selectvalue="{{autofillItem.task}}">{{ autofillItem.task }}</li>
				</ul>
				<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
			</template>
		</div>
		<button type="submit">Submit</button>
	</form>
</div>

<h2>Word - Filter type</h2>
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example5">
		<div class="form-group">
			<label for="ex_field_id_5">Please choose a task:</label>
			<select id="ex_field_id_5" class="wb-combobox" required name="selectName" data-wb5-template="ex_template_id_5" data-wb-filter-type="word" data-wb-load="//wet-boew.github.io/themes-dist/GCWeb/demos/suggest/demo/suggest-en.json#/suggestions">
				<option value="Lorem">Lorem</option>
				<option value="ipsum">ipsum</option>
				<option value="dolor">dolor</option>
				<option value="sit">sit</option>
			</select>
			<template id="ex_template_id_5">
				<ul class="list-unstyled">
					<li class="brdr-bttm" role="option" data-wb5-for="option in select.options" data-wb5-selectvalue="{{option.value}}">{{ option.textContent }}</li>
					<li class="brdr-bttm" role="option" data-wb5-for="autofillItem in wbLoad" data-wb5-selectvalue="{{autofillItem.task}}">{{ autofillItem.task }}</li>
				</ul>
				<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
			</template>
		</div>
		<button type="submit">Submit</button>
	</form>
</div>