$(document).ready(function () {
$('#textFind').click(function () {
$('.pesquisas').toggle(200);
});
});
$(function () {
$.expr[":"].contains = $.expr.createPseudo(function (a) {
return function (e) {
return ~$(e).text().toUpperCase().indexOf(a.toUpperCase());
}
});
$("[name=q]").on("input", function () {
$(".opcao").hide();
$(".opcao:contains('" + this.value + "')").show();
});
});
.pesquisas {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" name="q" class="search-text" placeholder="Procurar..." autocomplete="off" id="textFind">
<div class="pesquisas" id="pesquisas">
<div class="opcao">
<a>Agenda</a>
</div>
<div class="opcao">
<a>Lista de clientes</a>
</div>
<div class="opcao">
<a>Cadastrar novo cliente</a>
</div>
<div class="opcao">
<a>Lista de fornecedores</a>
</div>
<div class="opcao">
<a>Cadastrar novo fornecedor</a>
</div>
<div class="opcao">
<a>Lista de produtos</a>
</div>
<div class="opcao">
<a>Cadastrar novo produto</a>
</div>
</div>
No código acima, ao clicar no input
de pesquisa a minha div
'pesquisa' aparece, como eu faço para que ela apareça apenas depois de digitar mais que uma letra no input
? Por exemplo, ao invés de quando eu clicar já aparecer a lista, só deve aparecer, quando eu digitar as letras 'ag', a div
contendo agenda
? E mais, como faço para que quando eu clicar fora da div pesquisas
ela não apareça mais (display: none
), e não só quando eu clique no input novamente?
OBS. A intenção de cada botão <a>...</a>
é que sejam clicáveis. Posteriormente terão href='algum lugar'
.