1

Galera, beleza? Fiz um script em jQuery ui que usa o Autocomplete em uma barra de busca, o código funciona porem quando aparece o select com as opções o meu header fica por cima, o que pode ser? Obrigado inserir a descrição da imagem aqui

//CODIGO JQUERY UI

   $(function () {
    var Categorias = [
        "Doces",
        "Bebidas",
        "Hortifruti",
        "Frios e laticínios",
        "Higiene",
        "Marcearia",
        "Pães"
    ];
    $("#busca").autocomplete({
        source: Categorias
    });
});

//codigo HTML

<input class="ui-widget" type="text" name="busca" id="busca" style="display:none;" title="pesquisar" placeholder="Pesquise o seu produto" />
<button id="buscar_botao" style="display:none;">Buscar</button>

//CSS

input#busca {
    margin-top: 24px;
    width: 717px;
    border-radius: 5px;
    border: none;
    height: 41px;
    position: absolute;
    right: 165%;
    padding-left: 20px;
}
button#buscar_botao {
    width: 100px;
    height: 41px;
    border: none;
    margin-top: 24px;
    border-radius: 5px;
    background: #f3c705;
    cursor: pointer;
    font-family: "Oswald",sans-serif;
    position: absolute;
    right: 130%;
}
1
  • Poste um exemplo minimo e verificável, com o que você postou não dá para reproduzir o problema
    – user60252
    Commented 5/06/2018 às 3:35

1 Resposta 1

0

Você deve ter setado o z-index do seu header (barra vermelha do topo) com um valor para que fique sempre por cima do resto da página. Com isso, a div do jQuery-UI fica por baixo porque ela tem um z-index menor.

Resolva isso colocando um z-index na classe .ui-front que seja suficiente maior para que não fique por baixo do seu header. Adicione no seu CSS um valor com vários 9, algo assim:

.ui-front{
   z-index: 999999;
}

Exemplo 1: z-index menor

$(function () {
    var Categorias = [
        "Doces",
        "Bebidas",
        "Hortifruti",
        "Frios e laticínios",
        "Higiene",
        "Marcearia",
        "Pães"
    ];
    $("#busca").autocomplete({
        source: Categorias
    });
});
*{
   position: relative;  
}
#barra{
   background: red;
   padding: 100px;
   z-index: 999;
}

input#busca {
    xxxmargin-top: 24px;
    width: 717px;
    border-radius: 5px;
    border: none;
    height: 41px;
    position: absolute;
    xxxright: 165%;
    padding-left: 20px;
}
button#buscar_botao {
    width: 100px;
    height: 41px;
    border: none;
    xxxmargin-top: 24px;
    border-radius: 5px;
    background: #f3c705;
    cursor: pointer;
    font-family: "Oswald",sans-serif;
    position: absolute;
    xxxright: 130%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="barra">
Digite "a":
<br>
<input class="ui-widget" type="text" name="busca" id="busca" style="xdisplay:none;" title="pesquisar" placeholder="Pesquise o seu produto" />
<button id="buscar_botao" style="display:none;">Buscar</button>
</div>

Exemplo 2: z-index maior

$(function () {
    var Categorias = [
        "Doces",
        "Bebidas",
        "Hortifruti",
        "Frios e laticínios",
        "Higiene",
        "Marcearia",
        "Pães"
    ];
    $("#busca").autocomplete({
        source: Categorias
    });
});
*{
   position: relative;  
}
#barra{
   background: red;
   padding: 100px;
   z-index: 99;
}

input#busca {
    xxxmargin-top: 24px;
    width: 717px;
    border-radius: 5px;
    border: none;
    height: 41px;
    position: absolute;
    xxxright: 165%;
    padding-left: 20px;
}
button#buscar_botao {
    width: 100px;
    height: 41px;
    border: none;
    xxxmargin-top: 24px;
    border-radius: 5px;
    background: #f3c705;
    cursor: pointer;
    font-family: "Oswald",sans-serif;
    position: absolute;
    xxxright: 130%;
}

.ui-front{
   z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="barra">
Digite "a":
<br>
<input class="ui-widget" type="text" name="busca" id="busca" style="xdisplay:none;" title="pesquisar" placeholder="Pesquise o seu produto" />
<button id="buscar_botao" style="display:none;">Buscar</button>
</div>

1
  • Consegui resolver o problema, valeu Commented 9/06/2018 às 18:34

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 .