I have a div that has an "input" that returns the query results via ajax. I need that when selecting one of the results of the user, automatically jump to the next field or give an enter also jump to the next field. But these divs are inside a "clone" div in jQuery, so I can not get the ID.
With the help of @Sergio, I was able to adjust other details. Now all you need to do is jump to the next one.
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><inputtype="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's link to whomever you prefer: link