javascript – Relate dynamic inputs with datalist to other dynamic inputs

Question:

I'm new here and curious about programming, so sorry if I talk nonsense, but I need help.

I have a form with the option to insert inputs dynamically.
Whenever an "item" is added, two inputs are added, the "foo" and the "bar" . All "foo" are related to the datalist "list" .
All "bar" are inactive and their value must always be changed when the value of "foo" is changed.

HTML INPUTS:

<div id="lista">
  <div>
    <input name="foo[]" list="dList" type="text">
    <inpu name="bar[]" disabled="" type="text">
  </div>
  <div>
    <input name="foo[]" list="dList" type="text">
    <inpu name="bar[]" disabled="" type="text">
  </div>
</div>
<datalist id="dList">
  <option label="Item 1" datavalue="1" value="Item 1">
  <option label="Item 2" datavalue="2" value="Item 2">
</datalist>

The only way I found to get the (dynamic) inputs was:

input = $('#listaServicos').find(':input'); // array de inputs
// aqui tereis tanto os _"foo"_ quanto os _"bar"_

And then do a for working with them:

valores = [[1,3000],[2,5000],[3,4000],[4,10000],[5,10000]];

for (i = 0; i < input.length; i++) {
  name = input[i].name;
  console.log("name: "+ name);
  if(name.indexOf('foo') > -1){
    // aqui preciso pegar o atributo _"datavalue"_ do datalist 
    // correspondente, comparar com a key array valores
    //e preencher o _"bar"_ com o valor
  }
}

The biggest problem is in relating the "foo" with the datalist, because the "foo" and the "bar" will always be in the same subarray.

Thank you in advance for any help you want to come

Answer:

Here's an alternative implementation of what I understand about the problem, there are certainly better ways to implement it, the code is pretty self-explanatory but here's a brief description of what it does: First I put the .on('input') of the jquery that is triggered whenever the input is changed, then I take the selected value and look for it in the datalist( dList ) through the jquery selector , with the value I actually look for the corresponding key in the array of valores[] , after finding it I simply assign the value in the input bar with the siblings jquery .

*Note that the code only works in this format of the values ​​array , I tried to change it as little as possible, any doubts, I hope it helps.

//input = $('#listaServicos').find(':input'); // array de inputs
// aqui tereis tanto os _"foo"_ quanto os _"bar"_

valores = [
  [1, 3000],
  [2, 5000],
  [3, 4000],
  [4, 10000],
  [5, 10000]
];

$('input').on('input', function() {
  var value = $(this).val();
  var chaveSelecionada = $('#dList [value="' + value + '"]').data('value');
  var valorDaChaveNoArray = procuraPorChave(chaveSelecionada);
  $(this).siblings("input").val(valorDaChaveNoArray);

});

function procuraPorChave(id) {
  for (var i = 0; i < valores.length; i++) {
    for (var j = 0; j < 2; j++) {
      if (valores[i][j] == id) {
        return valores[i][j + 1];
      }
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lista">
  <div>
    <input name="foo[]" list="dList" type="text">
    <input name="bar[]" disabled="" type="text">
  </div>
  <div>
    <input name="foo[]" list="dList" type="text">
    <input name="bar[]" disabled="" type="text">
  </div>
</div>
<datalist id="dList">
  <option label="Item 1" data-value="1" value="Item 1">
  <option label="Item 2" data-value="2" value="Item 2">
</datalist>
Scroll to Top