Mask in Ajax table

Question

I own a autoComplete that I developed, where when typing some value, the system returns a table with the data of this autoComplete. This table is being returned via Ajax. However, I would like to add a mask in a field.

This is my job:

function CarregaCadastroImobiliario(elementoInput, elementoDiv, elementoModal) {
$(elementoInput).keyup(function () {
    var texto = $.trim($(this).val()),
        elemento = $(elementoDiv),
        tabela = "",
        linhas = "";

    elemento.html("");

    if (texto.length > 0) {
        tabela += '<table class="table table-condensed table-bordered table-striped" id="tblCadastroImobiliario">'
        tabela += '    <thead>'
        tabela += '        <tr>'
        tabela += '            <th>Inscrição</th>'
        tabela += '            <th>Cadastro Imobiliário</th>'
        tabela += '            <th>Logradouro</th>'
        tabela += '            <th>Nº</th>'
        tabela += '            <th>Complemento</th>'
        tabela += '            <th>Bairro</th>'
        tabela += '            <th style="width:40px"></th>'
        tabela += '        </tr>'
        tabela += '    </thead>'
        tabela += '    <tbody></tbody>'
        tabela += '</table>'

        $(elemento).append(tabela);
        var tblCadastroImobiliario = $("table#tblCadastroImobiliario");

        $.ajax({
            type: "GET",
            cache: true,
            url: BASE_URL + "Endereco/BuscaCadastroImobiliario",
            data: { CadastroImobiliario: texto },
            dataType: "json",
            timeout: 5000,
            success: function (data) {
                $.each(data, function (i, item) {
                    linhas += "<tr>";
                    linhas += "  <td>" + item.cdChaveInscri + "</td>";
                    linhas += "  <td>" + item.nmCadastroimobiliario + "</td>";
                    linhas += "  <td>" + item.nmLogradouro + "</td>";
                    linhas += "  <td>" + item.nrImovel + "</td>";
                    linhas += "  <td>" + item.dsComplEndereco + "</td>";
                    linhas += "  <td>" + item.nmBairro + "</td>";
                    linhas += "  <td>";
                    linhas += "    <button onclick='javascript:SelecionaCadastroImobiliario(\"" + item.nmCadastroimobiliario + "\", \"" + elementoModal + "\");' class='btn btn-primary btn-xs'><i class='glyphicon glyphicon-ok'></i></button>";
                    linhas += "  </td>";
                    linhas += "</tr>";
                });
                tblCadastroImobiliario.children("tbody").append(linhas);
            },
            beforeSend: function () {
                tblCadastroImobiliario.hide();
            },
            complete: function () {
                if (linhas.length > 0) {
                    tblCadastroImobiliario.show();
                } else {
                    tblCadastroImobiliario.remove();
                }
            }
        });

    }
});
}

I tried something like:

linhas += "  <td>" + item.cdChaveInscri.mask("99.99.999.9999.999") + "</td>";
// ou 
linhas += "  <td>" + item.cdChaveInscri.maskInput("99.99.999.9999.999") + "</td>";. 

However, I believe it is not possible to use this way, thus receiving an error in the console.

Uncaught Typeerror: item.cdChaveInscri.Mask is not a Function

I tried to use the Jquery Mask Input. However, to no avail.

         linhas += "  <td> <label id=\"Inscricao\" class=\"Inscricao\">" + item.cdChaveInscri + "</label></td>";
  complete: function () {
                    if (linhas.length > 0) {
                        tblCadastroImobiliario.show();
                            $("label.Inscricao").mask("99.999.999/9999-99", { reverse: true });
                        console.log(id);
                    } else {
                        tblCadastroImobiliario.remove();
                    }
                }

Answer 1

I used the Replace() for this. Where I pass the to my variable the way to display the values.

So was my table:

  linhas += "  <td>" + item.cdChaveInscri.replace(/^(\d{2})(\d{2})(\d{3})(\d{4})(\d{3}).*/, "$2.$2.$3.$4.$5") + "</label></td>";