1

 $(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'.

3 Respostas 3

5

Uma maneira é executar o evento no keyup e verificar o tamanho do valor do input.

Para esconder a div é só colocar o evento no document e verificar ao clicar se o evento contém a div #pesquisas, se não tiver, quer dizer que o click foi fora do elemento

 $(document).ready(function () {
        $('#textFind').on('keyup', function(){
            if($(this).val().length >= 1){
              $('.pesquisas').show('slide');
            }
        });

        $(document).on("click", function(e) {
            var div = document.querySelector("#pesquisas");
            var fora = !div.contains(e.target);
            if (fora){
                $('.pesquisas').hide('slide');
            }
        });
    });

    $(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;
    border: 1px solid red;
}
<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>

3
  • 1
    Apenas alterei para $('.pesquisas').show('slide'); pois a cada dois caracteres digitados a div escondia.
    – Rafael
    Commented 17/04/2019 às 20:16
  • Como a intenção dos botões <a>...</a> são ser clicáveis, ao clicar em alguma opção a div pesquisas irá sumir e não encaminhará para a página definida usando a função $('#textFind').focusout(function().
    – Rafael
    Commented 17/04/2019 às 20:55
  • @Rafael Fiz a alteração pra pegar o click fora da div
    – JrD
    Commented 18/04/2019 às 11:23
2

Existem muitas maneiras de fazer isto, uma delas é a seguinte, colocar um evento de input para quando for digitado algo no campo mostrar a lista e já ir filtrando:

$(document).ready(function() {
  var valor = $('#textFind');
  valor.on('input', function() {
    if(valor.val().length > 1) $('.pesquisas').toggle(200);
    else $('.pesquisas').hide();
  })
});

$(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>

2
  • No caso só faltou definir um if pra executar apenas acima de 2 caracteres if(string.length >= 2) pq no seu snippet tá ocorrendo só na 1a letra pressionada, da 2a em diante não funciona...
    – MonneratRJ
    Commented 17/04/2019 às 19:48
  • 1
    Realmente tinha me esquecido de colocar essa condição. Vlw!
    – LeAndrade
    Commented 17/04/2019 às 19:50
1

Boa tarde, apesar de provavelmente estar fora do assunto, acredito que a sua ideia seja dar sugestões ao usuário a partir do preenchimento do input, eu mesmo já fiz algo parecido manualmente e ficou muito legal, mas depois de ter descoberto o datalist(Novo recurso do HTML5), só criaria uma dessas se eu quiser muito trabalhar o estilo, mas acredito que cabe a sugestão de usar uma datalist.

Exemplo:

<input type=text list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

Espero que tenha ajudado.

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 .