I have 3 inputs
, where each one should use the same autocomplete function. However, each one will query with their respective val()
.
How do I change the code below, so that this function works "generic" for these inputs
? That is, there is no need to pass the date of AJAX, the three values in parallel (because only one will be used at a time).
Note: In AJAX return, I also need to treat by displaying a response to the user or filling in 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);
};
});
});