DL Styled

by kpowz

HTML

<form novalidate id='form' >
<input type="url" />

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option id="1"><span class="grapes">2o39u-some-guid-id</span> Chcolate</option>
    <option id="2" value="Coconut">
    <option id="3" value="Mint">
    <option id="4" value="Strawberry">
    <option id="5" value="Vanilla">
</datalist>

<select>
    <option id="1"><span class="grapes">2o39u-some-guid-id</span> Chcolate</option>
    <option id="2" value="2">Coconut</option>
    <option id="3" value="Mint">Mind</option>
    <option id="3" value="Mint">Mini</option>
    <option id="4" value="Strawberry">Strawberry</option>
    <option id="5" value="Vanilla">Vanilla</option>
</select>
<button type="submit">
Submit
</button>
</form>

CSS

.grapes {
  display: none;
  visibility: hidden;
}


span {
  display: none;
}

JavaScript

function submitHandler(e) {
  alert('hi')
  debugger;
	console.log(e)
}

function functionRef(e) {
debugger;
	alert(e.target.value);
  const dl = document.getElementById('ice-cream-flavors')
}

const form = document.getElementById('form');
form.onsubmit = submitHandler;

const inny = document.getElementById('ice-cream-choice');
inny.oninput = functionRef;