-2

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txt_nome_assinante").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: 'retornarInteressado.aspx',
                        data: JSON.stringify({ txt_interessado: $("#txt_nome_assinante").val() }),
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#cod_interessado_assinante").val(i.item.val);
                },
                minLength: 1,
                appendTo: $('#txt_nome_assinante_container')
            });
        });
    </script>
    <table>
        <td class="td_primeira">
            <b>NOME:</b><br />
            <div class="position-absolute" id="txt_nome_assinante_container">
                <input type="text" name="txt_nome_assinante" id="txt_nome_assinante" value="<% =txt_nome_assinante %>" >
            </div>
        </td>
    </table>
</body>
</html>

como está aparecendo atualmente! Veja que não da espaço e não possibilita a visão da digitação

Como deveria ficar

inserir a descrição da imagem aqui

1

1 Resposta 1

0

Imagem da página oficial do Autocomplete Plugin

Conforme a imagem acima, os itens do autocomplete são envolvidos por uma UL com o id 'ui-id-1', que pode mudar, por isso verifique o id do seu. Altera a propriedade css 'top' desse elemento conforme sua necessidade, aumentando o valor para afastar ou diminuindo para aproximar do input. É sempre bom colocar '!important' após o comando para garantir que ele irá sobrescrever os estilos já aplicados.

#ui-id-1 {
  top: 67px !important;
  left: 50.6875px;
  width: 201px;
}
1
  • Obrigada @TiagusXP era isso mesmo que eu precisava Commented 25/09/2023 às 17:25

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .