Menu
Community /Pin to ProfileBookmark
@daveyerwinJul 24.2020 — #@sibert#1621240 said ...
So, there should not be any ad-hoc entering. You must select a existing value.
@daveyerwinJul 28.2020 — #@JMRKER#1621334
should be
@sibert#1621240 said ...
The value selected in the datalist should be verified by a "data-value".
So, there should not be any ad-hoc entering. You must select a existing value.
entered data case sensitive
must capitalize first letter
the function that prohibits adhoc letters will work
on any datalist on page if the input element has
the data-noadhoc attribute
Datalist required=”data-value”
I am trying to use “datalist” in html as a “select”.
The value selected in the datalist should be verified by a “data-value”.
So, there should not be any ad-hoc entering. You must select a existing value.
My current solution allow non existing values.
Something like this:
`<input list=”jobs” placeholder=”Select Job” required=”data-value”>
Fiddle:
Is this possible?
Sign in
to post a comment11 Comments(s) ↴
0
@daveyerwinJul 24.2020 — #So, there should not be any ad-hoc entering. You must select a existing value.
``<i>
</i><label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<script>
browser.onchange=function(){
for(var i=0;browsers.options.length;++i){
if (typeof browsers.options[i]=='undefined'){break ;}
if (browser.value == browsers.options[i].value) break;
}
if(i == 5){browser.value = ''}
}</script><i>
</i>``0
@daveyerwinJul 28.2020 — #<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>should be
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>0
@daveyerwinJul 28.2020 — #The value selected in the datalist should be verified by a "data-value".
So, there should not be any ad-hoc entering. You must select a existing value.
entered data case sensitive
must capitalize first letter
``<i>
</i><form onsubmit='return val(false)'>
<label for=browser>Choose your browser from the list:</label>
<input list=browsers name=browser id=browser data-noadhoc>
<datalist id=browsers>
<option data-id=1 value="Edge">
<option data-id=2 value="Firefox">
<option data-id=3 value="Chrome">
<option data-id=4 value="Opera">
<option data-id=5 value="Safari">
</datalist>
<button>Send</button>
</form>
<script>
window.oninput=function(e){
if(e.target.dataset.noadhoc == undefined)return;
var list=e.target.list;
(function chek(ok){
for(var i=0;i<list.options.length;++i)
if (e.target.value == list.options[i].value.substring(0,e.target.value.length))ok=true;
if(!ok){e.target.value = e.target.value.substring(0,e.target.value.length-1);chek();}}
)(false);
}
function val(ok){
for(var i=0;i<browsers.options.length;i++)
if(browsers.options[i].value == browser.value){
ok=true;browser.value=browsers.options[i].dataset.id;}
if(!ok) alert('Failed');
return ok;
}
</script><i>
</i>``the function that prohibits adhoc letters will work
on any datalist on page if the input element has
the data-noadhoc attribute