Combobox test 3 - Datalist JSON suggestion - Research and finding

Prototype of an select box transformed into a customized combobox with the listbox pattern.

Integrated in a form with the WET form validation plugin

Field required and integrated in a form with the WET form validation plugin

In a form

In page only

Dummy link

Source code

<h2>Integrated in a form with the WET form validation plugin</h2>
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		<div class="form-group">
			<label for="id_select">Please choose an option</label>
			<select id="id_select" class="wb-combobox" name="selLoremIpsum" data-wb5-template="id_select_template" data-wb-filter-type="any" data-wb-limit="7" 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="id_select_template">
				<ul class="list-unstyled">
					<li style="border-bottom: 1px dotted black" role="option" data-wb5-for="alias in wbLoad" data-wb5-selectvalue="{{alias}}">{{ alias }}</li>
				</ul>
				<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
			</template>
		</div>
		<input name="sss"/>
		<button type="submit">Submit</button>
	</form>
</div>


<h2>Field required and integrated in a form with the WET form validation plugin</h2>
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example2">
		<div class="form-group">
			<label for="id_select2">Please choose an option</label>
			<select id="id_select2" class="wb-combobox" required name="selLoremIpsum" data-wb5-template="id_select2_template" data-wb-filter-type="any" data-wb-limit="7" 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="id_select2_template">
				<ul class="list-unstyled">
					<li style="border-bottom: 1px dotted black" role="option" data-wb5-for="alias2 in wbLoad" data-wb5-selectvalue="{{alias2}}">{{ alias2 }}</li>
				</ul>
				<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
			</template>
		</div>
		<input name="sss" />
		<button type="submit">Submit</button>
	</form>
</div>


<h2>In a form</h2>
<form action="#" method="get" id="validation-example3">
	<div class="form-group">
		<label for="id_select3">Please choose an option</label>
		<select id="id_select3" class="wb-combobox" name="selLoremIpsum" data-wb5-template="id_select3_template" data-wb-filter-type="any" data-wb-limit="7" 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="id_select3_template">
			<ul class="list-unstyled">
				<li style="border-bottom: 1px dotted black" role="option" data-wb5-for="autofillItem in wbLoad" data-wb5-selectvalue="{{autofillItem.toUpperCase()}}">{{ autofillItem }}</li>
			</ul>
			<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
		</template>
	</div>
	<input name="sss" />
	<button type="submit">Submit</button>
</form>

<h2>In page only</h2>
<label for="id_select4">Please choose an option</label>
<select id="id_select4" class="wb-combobox" required name="selLoremIpsum" data-wb5-template="id_select3_template" data-wb-filter-type="any" data-wb-limit="7" 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>
<p><a href="#">Dummy link</a></p>