Combobox prototype 2 - Datalist JSON suggestion - Research and finding

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

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

Prototype with async loading and different templating way

Note: The above example may a little bit buggy during initialisation, that is because this prototype need GCWeb theme.js. To get around it, you need to move focus in the input between two of the above example.

Show the loaded autofill options

A dummy link for tab sequence testing

<label for="id_select5">Please choose an option</label>
<select id="id_select5" class="wb-combobox" name="selLoremIpsum" data-wb5-template="id_select5_template" data-wb-filter-type="any" 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="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="ipsum">ipsum</option>
	<option value="dolor">dolor</option>
	<option value="sit">sit</option>
</select>

<template id="id_select5_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>

Show the option from select, limit at 2 results

A dummy link for tab sequence testing

<label for="id_select2">Please choose an option</label>
<select id="id_select2" class="wb-combobox" name="selLoremIpsum" data-wb5-template="id_select2_template" data-wb-filter-type="any" data-wb-limit="4">
	<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 role="option" data-wb5-for="autofillItem in select.options" data-wb5-selectvalue="{{autofillItem.textContent.toUpperCase()}}">{{ autofillItem.textContent }}</li>
	</ul>
	<hr class="brdr-bttm mrgn-tp-sm mrgn-bttm-sm">
	<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
</template>

Show the option from select (limit number of result)

A dummy link for tab sequence testing

<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="4">
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<option value="Lorem">Lorem</option>
	<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 role="option" data-wb5-for="autofillItem in select.options" data-wb5-selectvalue="{{autofillItem.textContent.toUpperCase()}}">{{ autofillItem.textContent }}</li>
	</ul>
	<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
</template>

Show both, loaded and from the select

<label for="id_select4">Please choose an option</label>
<select id="id_select4" class="wb-combobox" name="selLoremIpsum" data-wb5-template="id_select4_template" 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="id_select4_template">
	<ul class="list-unstyled">
		<li style="border-bottom: 1px solid blue" class="mrgn-bttm-sm" role="option" data-wb5-for="autofillItem in select.options" data-wb5-selectvalue="{{autofillItem.textContent}}">{{ autofillItem.textContent }}</li>
		<li style="border-bottom: 1px dotted black" role="option" data-wb5-for="autofillItem in wbLoad" data-wb5-selectvalue="{{autofillItem}}">{{ autofillItem }}</li>
	</ul>
	<p role="option" data-wb5-selectvalue="my default value">Default persistent option</p>
</template>

A dummy link for tab sequence testing