Datalist with array

Question

with little knowledge and search I managed to reach this code where I seek to create a DATALIST that when selecting an option of name... Complete the other two fields RG and tel in input automatically ...

I tried so I got... Someone could help me.

var test = [{
    name: "Rodrigo",
    rg: "00.000",
    tel: "(01) 00000-000"
  },
  {
    name: "Monica",
    rg: "85.000",
    tel: "(02) 00000-000"
  },
  {
    name: "Maria",
    rg: "68.000",
    tel: "(03) 00000-000"
  }
];

var options = '';


for (var i = 0; i < test.length; i++) {
  options += '<option value="' + test[i].name + '" />';
  document.getElementById('maltList').innerHTML = options;
  document.getElementById('rg').value = test[i].rg;
  document.getElementById('tel').value = test[i].tel;
}

<input name="malt" list="maltList" />
<datalist id="maltList"></datalist>
<input name="rg" type="text" id="rg"> //
<input name="tel" type="text" id="tel">

Answer 1

Documentation is an excellent piece of content that can help you learn. In HTML documentation there is a detailed explanation of the objective of the element input and its objective.

The html element <input> is used to create interactive controls for web-based forms to receive user data.

And javascript is used so that we can control these user interactions with our HTML - and other things, of course :) For this control, you must use the function addEventListener how explains the documentation.

addEventListener() records a single event wait on a single target.

Then your code should look like this:

var test = [{
    name: "Rodrigo",
    rg: "00.000",
    tel: "(01) 00000-000"
  },
  {
    name: "Monica",
    rg: "85.000",
    tel: "(02) 00000-000"
  },
  {
    name: "Maria",
    rg: "68.000",
    tel: "(03) 00000-000"
  }
];

var options = '';
var inputMalt = document.getElementById('malt');

// Adicionar somente os options dinamicamente
for (var i = 0; i < test.length; i++) {
  options += '<option value="' + test[i].name + '" />';
}

// Adicionar a lista após popular toda a string options
document.getElementById('maltList').innerHTML = options;

// Adicionar o evento e obter e filtrar o dado selecionado
inputMalt.addEventListener('change', function() {
  var selectedOption = this.value;

  // Filtrando a lista para identificar o item selecionado
  var current = test.find(item => item.name === selectedOption);

  document.getElementById('rg').value = current.rg;
  document.getElementById('tel').value = current.tel;
});

<input id="malt" name="malt" list="maltList" />
<datalist id="maltList"></datalist>
<input name="rg" type="text" id="rg"> //
<input name="tel" type="text" id="tel">