1

Criei um alto complete com o jquery, mais a caixa de retorno esta subindo para o topo da pagina, como poderia ajustar?

Segue imagem de exemplo:

inserir a descrição da imagem aqui

Segue o código do autocomplete:

Teste 01

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  $("#produto").autocomplete({
    source: 'functions/pesquisa-itens.php',
    minLength: 1,
    select: function(event, ui) {
      $('#produto').val(ui.item.prod_final);
    },
    position: { 
      my: "left bottom",
      at: "left top",
      of: $("#produto"),
      collision: "flip flip"
    }
  });
});

Teste 02:

$(document).ready(function() {
  $("#produto").autocomplete({
    source: 'functions/pesquisa-itens.php',
    minLength: 1,
    select: function(event, ui) {
      $('#produto').val(ui.item.prod_final);
    }
  });
});
$(".ui-autocomplete").position({
  my: "left bottom",
  at: "left top",
  of: $("#produto"),
  collision: "flip flip"
});

HTML:

   <form class="form-horizontal">
     <div class="row">

      <div class="col-md-6">
        <div class="ui-widget">
          <label for="produto">Produto:</label>
          <input type="text" class="form-control" id="produto" name="produto">
        </div>
      </div>
2
  • adicione o html e js do autocomplete na pergunta 28/01/2019 às 14:35
  • @LeandroAngelo Adicionei o bloco do form do html, o js é o que já estava na pergunta, estou usando o bootstrap. 28/01/2019 às 23:23

1 Resposta 1

2
+50

Use a função jquery position

$(".ui-autocomplete").position({
    my: "left bottom",
    at: "left top",
    of: $("#produto"),
    collision: "flip flip"
});

Coloque no CSS o seguinte seletor:

 .ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: inline;
    min-width: 160px;   
    padding: 4px 0;
    margin: 0 0 10px 25px;
    list-style: none;        
}
2
  • @OtácioBarbosa de uma olhada no CSS e veja se tem algum seletor .ui-autocomplete 29/01/2019 às 12:29
  • @OtácioBarbosa fiz uma modificação na resposta um seletor CSS veja se te ajuda. 29/01/2019 às 12:33

Você deve fazer log-in para responder a esta pergunta.

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