How to do a dropdown autocomplete field in Loop

Question

How to do a dropdown autocomplete field in Loop

Navigation

#1 by (1 votes)

0

As I do not have much knowledge of javascript I need a help in this my problem here ... In this form and precise that when choosing an item in the dropdown it fills the field next to the value contained in its value

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptlanguage="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><formid="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 I choose an item in this dropdown it autocomplete in the field name="value" that value that comes after the item name

javascript html jquery ajax dropdown

asked by anonymous 24.09.2018 / 20:19

1 answer

create random number in python beginning with the year Insert variable in script

score 1 · Accepted Answer

The solution is found. I used the change event to capture the value when the user chooses an option in select . I break the value of select into 2 parts [Name-Value], and I get only the part relating to the value, adding to input to the side.

(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><divid="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>