How to Dropdown Autocomplete Field in Loop

Question

Como não tenho muito conhecimento de javascript I need a help in this my problem here... In this and precise form that when choosing an item in the dropdown it fills the field beside with the value contained in its value

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<script language="javascript">

(function ($) {
  $('#destino_in').on('change', function () {
    var $self = $(this);

    $('#destino_out').val($self.val());
  });
}(jQuery));



$(function () {
    var divContent = $('#materialInst');
    var botaoAdicionar = $('a[data-id="1"]');
    var i = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar).click(function () {


     


        $('<div class="conteudoIndividual"><tr><td>'+
'<input type="text" name="estado" size="5" class="form-control" value="" />'+
'<select name="destino_in" id="destino_in" class="form-control">'+
  '<option value="" selected disabled>Selecione...</option>'+
  '<option value="Vilamar">Vilamar</option>'+
  '<option value="Savoy">Savoy</option>'+
'</select>'+
'<input type="text" placeholder="Valor" name"valor" id="valor" class="form-control" />'+
'<input type="text" size="5" name="numero" class="form-control" value="" />'+
'<a href="#" class="linkRemover">Remover</a></td></tr></div>').appendTo(divContent);

        $('#removehidden').remove();
        i++;
        $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
    });

    //Cliquando em remover a linha é eliminada
    $('#materialInst').on('click', '.linkRemover', function () {
        $(this).parents('.conteudoIndividual').remove();
        i--;
    });
});
//-->



</script>

<table>
<div id="materialInst">
 

</div>
<a href="#" id="adicionar" data-id="1">Clonar</a>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" action="src/acao/cli.php" method="POST" enctype = "multipart/form-data" >                
   




</div>



</form>

In the dropdown of this form we have the following data in the input

<option value="Vilamar-10,00">Vilamar</option>

I need that when choosing an item in this dropdown it autocomplete in the field name="value" that value comes after the item name

Answer 1

Following solution found. I used the event change to capture the value when the user chooses an option in select. I break the value of the select in 2 parts[Name-Value], and take only the part referring to the value, adding to the input next door.

(function ($) {
        $('#destino_in').on('change', function () {
            var $self = $(this);
    
            $('#destino_out').val($self.val());
        });
        }(jQuery));
    
        $(function () {
        var divContent = $('#materialInst');
        var botaoAdicionar = $('a[data-id="1"]');
        var i = 1;
        // VARIAVEL ADD
        var destino;
    
        //Ao clicar em adicionar ele cria uma linha com novos campos
        $(botaoAdicionar).click(function () {
            $('<div class="conteudoIndividual"><tr><td>'+
            '<input type="text" name="estado" size="5" class="form-control" value="" />'+
            '<select name="destino_in_' + i + '" id="destino_in_' + i + '" class="form-control">'+
                '<option value="" selected disabled>Selecione...</option>'+
                '<option value="Vilamar-10,00">Vilamar</option>'+
                '<option value="Savoy-20,00">Savoy</option>'+
            '</select>'+
            '<input type="text" placeholder="Valor" name"valor_' + i + '" id="valor_' + i + '" class="form-control" />'+
            '<input type="text" size="5" name="numero" class="form-control" value="" />'+
            '<a href="#" class="linkRemover">Remover</a></td></tr></div>').appendTo(divContent);
    
            $('#removehidden').remove();
            i++;
            $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
    
            // ADD AQUI

            // Aqui acontece a inserção dos valores no outro input
            // capturo todos os selects existentes
            destinos = document.querySelectorAll('select');
            // percorro todos pelo for
            for(var j = 0; j < destinos.length; j++) {
                // verifico no evento de change
                $(destinos[j]).on('change', function(){
                    // quando ocorrer, capturo o valor selecionado
                    var selected = $(this).val();
                    // divido a string em 2, separada pelo (-) [nome(-)valor]
                    var res = selected.split("-", 2);
    
                    // res[0] = "Vilamar";
                    // res[1] = "10,00";

                    // captura o id atual
                    var idAtual = $(this).attr('id');
                    // divide a string em 3, separada pelo (_) [destino(_)in(_)id]
                    var idFinal = idAtual.split("_", 3);
                    // idFinal[0] = "destino";
                    // idFinal[1] = "in";
                    // idFinal[1] = "{$id}";
    
                    // adiciono no input #valor o resultado do array na posição 1 no id capturado anteriormente na posição 2
                    $('#valor_' + idFinal[2]).val(res[1]);
                });
            }
            // FIM ADD
        });
    
        //Cliquando em remover a linha é eliminada
        $('#materialInst').on('click', '.linkRemover', function () {
            $(this).parents('.conteudoIndividual').remove();
            i--;
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <div id="materialInst">
  </div>
  <a href="#" id="adicionar" data-id="1">Clonar</a>
  <form id="form1" name="form1" action="src/acao/cli.php" method="POST" enctype = "multipart/form-data" >                
  </form>
</table>