How to create generic function for different inputs

Asked

Viewed 42 times

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 + "&nbsp; | &nbsp; <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 with event.target.id;.

No answers

Browser other questions tagged

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