Domanda
I have a simple program which has to take the values from the text file on server and then populate on the datalist as the selection in the input text field.
For this purpose the first step i want to take is that i want to know that how the array of javascript can be used as a datalist options dynamically.
My Code is :
https://stackoverflow.com/questions/17929356
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<html>
<script>
var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';
</script>
<input name="anrede" list="anrede" />
<datalist id="anrede">
<option value= mycars[0]></option>
<option value="Frau"></option>
</datalist>
</html>
I want to populate the input text field containing the datalist as suggestion from the array. Also here I havenot take into account the array values. Actually i need not two datalist options but dxnamic depending on the array length
Soluzione 2
I'm not sure if I understood your question clearly. Anyway, try this:
var mycars = new Array();
mycars[0] = 'Herr';
mycars[1] = 'Frau';
var options = '';
for (var i = 0; i < mycars.length; i++) {
options += '<option value="' + mycars[i] + '" />';
}
document.getElementById('anrede').innerHTML = options;<input name="car" list="anrede" />
<datalist id="anrede"></datalist>Altri suggerimenti
This is an old question and already sufficiently answered, but I'm going to throw the DOM method in here anyway for anyone that doesn't like to use literal HTML.
<input name="car" list="anrede" />
<datalist id="anrede"></datalist>
<script>
var mycars = ['Herr','Frau'];
var list = document.getElementById('anrede');
mycars.forEach(function(item){
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
</script>
If you are using ES6 you could do it this way, this is Paul Walls techniques with ES6 syntax.
const list = document.getElementById('anrede');
['Herr','Frau'].forEach(item => {
let option = document.createElement('option');
option.value = item;
list.appendChild(option);
});<input name="car" list="anrede" />
<datalist id="anrede"></datalist>You can do it jQuery way - but on the other hand, since you are processing data on the server, you might generate HTML directly there (just a suggestion).
<script>
var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';
$(document).ready( function() {
$(mycars).each( function(index, item) {
var option = $('<option value="'+item+'"></option>');
$('#anrede').append(option);
});
});
</script>
<input name="anrede" list="anrede" />
<datalist id="anrede">
<!-- options are filled in the script -->
</datalist>
Here's a JSFiddle with this code so you can immediatelly try it: http://jsfiddle.net/mBMrR/
A more performant way of doing this is to use fragment.
Append the option elements to the <datalist> dynamically, but instead of adding every item from the list, use fragment to avoid reflow and render them into the DOM just once.
var datalist = document.getElementById('anrede');
var fragment = document.createDocumentFragment();
var myCars = ['Herr', 'Frau'];
// Prepare the option elements to be rendered.
myCars.forEach(function(car) {
var option = document.createElement('option');
var text = document.createTextNode(car);
option.value = car;
option.appendChild(text);
fragment.appendChild(option);
});
// Append all of them to DOM.
datalist.appendChild(fragment);<input name="anrede" list="anrede" />
<datalist id="anrede"></datalist>There is also a constructor to create an option : new Option()
const
dtl_anrede = document.getElementById('anrede')
, myCars = ['Herr','Frau' ]
;
myCars.forEach(car => dtl_anrede.appendChild( new Option('',car)))<input name="car" list="anrede" />
<datalist id="anrede"></datalist>