2
I own 3 inputs
, where each should use the same autocomplete. However, each will carry out the consultation with their respective val()
.
How should I change the code below, so that this function works in a "generic" way for these inputs
? That is, without the need to pass the date AJAX, the three values in parallel (because only one will be used at a time).
Obs.: on the return of AJAX, also need to handle displaying a response to the user or filling the autocomplete for that respective input
.
$(function () {
$("#suporteFrontal, #suporteTraseiro, #suporteUnico").on('change paste keyup', function () {
$("#suporteFrontal, #suporteTraseiro, #suporteUnico").autocomplete({
minLength: 1,
appendTo: '#modalCortina',
source: function (request, response) {
$.ajax({
url: "actions/consultar-suporte.php",
dataType: "json",
cache: false,
data: {
acao: 'autocomplete',
modeloProduto: $("#modeloProduto").val(),
descSuporte: $("#suporteFrontal").val(),
descSuporteI: $("#suporteTraseiro").val(),
descSuporteII: $("#suporteUnico").val(),
fixacaoSuporte: $('#fixacaoSuporte').val(),
tipoSuporte: $('#tipoSuporte').val()
},
success: function (data) {
if (data == "") {
$("#colSupFrontal p").html('<p class="at-error">Suporte não encontrado.</p>');
} else {
$("#colSupFrontal p").remove();
response(data);
}
}
});
},
focus: function (event, ui) {
$("#suporteFrontal").val(ui.item.descricao);
carregarDados();
return false;
},
select: function (event, ui) {
$("#suporteFrontal").val(ui.item.descricao);
return false;
}
}).autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>").append("<strong>Código: </strong>" + item.codigo + " | <strong>Descrição: </strong>" + item.descricao + "<br>").appendTo(ul);
};
});
});
I don’t know much about autocomplete, but you can take the value of the input that is sending data with:
$('#'+event.target.id).val();
or take the id of this input withevent.target.id;
.– Sam