Combobox test 1 - Datalist JSON suggestion - Research and finding

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

View more different example bellow

A dummy link for tab sequence testing

Source code

HTML

<label for="id_select">Please choose an option</label>
<select id="id_select" class="wb-combobox" name="selLoremIpsum">
	<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>
	<option value="Lorem">Lorem</option>
	<option value="ipsum">ipsum</option>
	<option value="dolor">dolor</option>
	<option value="sit">sit</option>
</select>

CSS

<style>

/* Overlay default style */
[role=listbox] {
	min-width: 230px;
	background: white;
	border: 1px solid #ccc;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.7em;
	z-index: 9999;
	/* Note about z-index

	Ideally it should be set to 1, but the 
 has a z-index set to 5,
	 */
}

/* Active state style */
[role=option][aria-selected=true] {
	background: rgb(139, 189, 225);
}
[role=option]:hover {
	cursor: default;
}

/* Have the input and the overlay together */
.combobox-wrapper {
    display: inline-block;
    position: relative;
}

</style>

Javascript

wet-boew plugin - 2018-assets/1-datalist-combobox.js