HTML-Datenlistenwerte aus einem Array in Javascript

Question 1

Ich habe ein einfaches Programm, das die Werte aus der Textdatei auf dem Server entnehmen und dann die Datenliste als Auswahl im Eingabetextfeld ausfüllen muss.

Zu diesem Zweck ist der erste Schritt, den ich unternehmen möchte, dass ich wissen möchte, wie das Array von Javascript dynamisch als Datalist-Optionen verwendet werden kann.

Mein Code ist:

<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>

Ich möchte das Eingabetextfeld mit der Datenliste als Vorschlag aus dem Array füllen. Auch hier habe ich die Array-Werte nicht berücksichtigt. Eigentlich brauche ich nicht zwei Datalist-Optionen, sondern dxnamic, abhängig von der Array-Länge

Question 2

Dies ist eine alte Frage und bereits ausreichend beantwortet, aber ich werde die DOM-Methode trotzdem für alle einwerfen, die kein wörtliches HTML verwenden möchten.

<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>

Hier ist die Geige.

Question 3

Ich bin mir nicht sicher, ob ich Ihre Frage klar verstanden habe. Versuchen Sie es trotzdem:

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>

Question 4

Wenn Sie ES6 verwenden, können Sie dies auf diese Weise tun. Dies sind Paul Walls-Techniken mit 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>

Question 5

Sie können es auf jQuery-Weise tun – aber andererseits, da Sie Daten auf dem Server verarbeiten, können Sie HTML direkt dort generieren (nur ein Vorschlag).

<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>

Hier ist ein JSFiddle mit diesem Code, damit Sie es sofort ausprobieren können: http://jsfiddle.net/mBMrR/

Question 6

Eine leistungsfähigere Möglichkeit, dies zu tun, ist die Verwendung Fragment.

Hängen Sie die Optionselemente an die an <datalist> dynamisch, aber anstatt jedes Element aus der Liste hinzuzufügen, verwenden Sie fragment, um einen Umfluss zu vermeiden, und rendern Sie sie nur einmal in das DOM.

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>

Question 7

Es gibt auch einen Konstruktor, um eine Option zu erstellen: neue 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>