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/