AUTOCOMPLETE jquery ui

Question

AUTOCOMPLETE jquery ui

Navigation

#1 by (0 votes)

1

Galera, beauty? I made a script in jQuery that uses Autocomplete in a search bar, the code works, however when it appears select with the options my header is on top, what can it be? Thank you

//JQUERYUICODE

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

// HTML code

<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%;
}

html5 css3 jquery-ui

asked by anonymous 05.06.2018 / 05:18

1 answer

Contact form with blank data Application wpf with entity framework does not work on another machine

score 0 · Accepted Answer

You must have set the z-index of your header (red bar at the top) with a value to always stay above the rest of the page. With this,%% of jQuery-UI gets below because it has% w /% less.

Resolve this by putting a div in the z-index class that is large enough so that it does not fall below your z-index . Add in your CSS a value with several .ui-front , something like this:

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

Example 1: smaller z-index

$(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><linkrel="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><divid="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>

Example 2: greater z-index

$(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><linkrel="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><divid="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>