Skip field when selecting ajax result

Asked

Viewed 61 times

1

I have a div that has an "input" that returns via ajax the results of the query. I need that when selecting one of the user’s results, automatically skip to the next field or if you enter also skip to the next field. But these Divs are inside a div "clone" in jQuery, so I can’t take it by ID.

With the help of @Sergio, I was able to adjust other details. Now all that remains is to skip to the next.

Source code:

//===================================================
//INICIO BUSCA NCM
//===================================================

$(".resultado_ncm", this).hide();

//$("#ncm").keyup(function(){
$('#conteudo_engloba').on('keyup', 'input[name="ncm[]"]', function() {
    //var queryNcm = $(this).val();
    //if($('input[name="ncm[]"]').val().length > 2){
    var queryNcm = this.value;
    console.log(queryNcm);
    if (this.value.length > 2) {
        //nova para aparecer adicionar novo
        $(".resultado_ncm", this)
            .html("<br><span class='naoEncontrado'>Não encontrado.</span><br><br><span><a onClick='novoProd(1);'>(+) Cadastrar Novo </a></span>")
            .css({
                'height': 'auto',
                'margin-top': '45px',
                'width': '330px'
            })
            .show();
        var self = this;
        $.ajax({
            type: "POST",
            url: "/echo/json", // só para o jsFiddle... muda depois para url: "ajax_busca_ncm.php",
            data: {
                q: queryNcm
            },
            dataType: "json",
            success: function(json) {
                json = ['um', 'dois', 'tres']; // só para testar
                var options = "";
                $.each(json, function(key, value) {
                    options += "<a class='resultado_json' alt='" + value + "' href='#' id='" + key + "'>" + value + "</a><br/>";
                    //"<option value='" + key + "'> " + value + "</option>";
                });
				
                $(self).closest('.engloba').find(".resultado_ncm").html("<br>" + options + "<br><span><a onClick='novoCliente(1);'>(+) Cadastrar Novo</a></span>").show();
                $(".resultado_json").click(function() {
                    var id_ncm = this.id;
                    var nome_ncm = $(this).attr('alt');
                    $('input[name="id_ncm[]"]', this).val(id_ncm);
                    $('input[name="ncm[]"]', this).val(nome_ncm);
                    $(".resultado_ncm").html('').hide();
                });
            }
        });
    } else {
        $(".resultado_ncm", this).hide().html('');
        $('input[name="id_ncm[]"]').val(0);
    }
});
//======================================================
//FIM BUSCA NCM
// Codigo Clone
$(document).ready(function() {
    clonar();
    $("#mais").on("click", clonar);
});

function clonar() {
    var linha = $("#engloba-template > .engloba").clone();
    $("#conteudo_engloba").append(linha);
};
//Codigo AJAX Busca
#conteudo_engloba div div {
    display: none;
}

.engloba {
    margin-top: 20px;
}

#engloba-template {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="button" name="" value="Adicionar Produto" id="mais" />
</form>
<div id="conteudo_engloba">
</div>

<div id="engloba-template">
    <div class="engloba">
        <div id="detalhes" style="display:block; ">
            <H2>Detalhes</H2>
            <span class="divInputs">NCM* 
				<input type="text" autocomplete="off" ncm id="ncm" name="ncm[]" />
			</span>
            <span class="resultado_ncm"></span>
        </div>
    </div>
</div>

Jsfiddle link for those who prefer: https://jsfiddle.net/wmdo05m9/

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.