Jquery - Multi-line Viacep autocomplete

Question

I’m using Viacep’s Webservice to do the street autocomplete on my registration form, but it’s a form where 20 lines, each line contains: ZIP CODE + STREET OF THE CONDOMINIUM when filling the zip code it has to complete the street only referring to that zip code of the same line, I tried using $("cep").next("rua").val(dados.lougradouro) and I couldn’t.

//HTML

<table>
<tbody>
    <tr>
        <td><input type="text" name="cep_streetcond[]"></td>
        <td><input type="text" name="street_streetcond[]"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep_streetcond[]"></td>
        <td><input type="text" name="street_streetcond[]"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep_streetcond[]"></td>
        <td><input type="text" name="street_streetcond[]"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep_streetcond[]"></td>
        <td><input type="text" name="street_streetcond[]"></td>
    </tr>
</tbody>

//JQUERY

$(document).ready(function() {
    var cep_cond = $("input[name='cep_streetcond[]']");
    var rua_cond = $("input[name='street_streetcond[]']");

    cep_cond.blur(function() {
        var cep_replace = $(this).val().replace(/\D/g, '');

        rua_cond.val("Buscando...");

        $.getJSON("https://viacep.com.br/ws/" + cep_replace + "/json/?callback=?", function(dados) {
            if (!("erro" in dados)) {
                $("input[name='cep_streetcond[]']").next().val(dados.logradouro);

            } else {
                alert("CEP não encontrado");
            }
        });
    });
});

Answer 1

.next() will not find the street input, because next returns the next element, which in this case is none, since the CEP input is the only element inside the <td>.

To find the street input, you need to return to the common predecessor of the two inputs, which in this case is the <tr>, with $(this).closest('tr'), after that you can locate the street input with .find("input[name='street_streetcond[]']").

$(document).ready(function() { 
    var cep_cond = $("input[name='cep_streetcond[]']"); 
    var rua_cond = $("input[name='street_streetcond[]']");

    cep_cond.blur(function() {
        var cep_replace = $(this).val().replace(/\D/g, '');
        var logadouro = $(this).closest('tr').find("input[name='street_streetcond[]']");

        logadouro.val("Buscando...");

        $.getJSON("https://viacep.com.br/ws/" + cep_replace + "/json/?callback=?", function(dados) {
            if (!("erro" in dados)) {
                logadouro.val(dados.logradouro);

            } else {
                alert("CEP não encontrado");
            }
        });
    });  
});

Answer 2

The code below is a functional example, let’s understand it.

All our zip fields receive the attribute "name":"cep".

We added an event to all elements with the name=cep.

When the event is triggered we take the value typed in "zip code" and save in the variable "zip code" after replace.

We kept the element that will receive the street of the informed cep, to arrive at it it was necessary to use the parents() seeking the tr’s and picking the first that would be the one that contains the same, after that we used the . find and find the name element "street"

With the code that the author of the question added search to the cep we modify only to set in the element "eRua" after checking whether or not it exists.

$(() => {
  $('[name="cep"]').on('focusout',function() {
    var cep = this.value.replace(/\D/g, '');
    var eRua = $($(this).parents('tr')[0]).find('[name="rua"]');
    $.getJSON("https://viacep.com.br/ws/" + cep + "/json/?callback=?", function(dados) {
      if (!("erro" in dados)) {
        eRua.val(dados.logradouro)
      } else {
        alert("CEP não encontrado");
      }
    });
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
</tbody>
</table>

References :

FIND

PARENTS

GETJSON