Show div after a certain amount of input digits

Question

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

In the code above, by clicking on input research my div 'search' appears, as I do for it to appear only after typing more than one letter in input? For example, instead of when I click already appear the list, it should only appear, when I type the letters 'ag', the div containing agenda? And more, how do I so when I click off the div pesquisas she doesn’t show up anymore (display: none), and not just when I click the input again?

OBS. The intention of each button <a>...</a> is that they are clickable. Subsequently they will have href='algum lugar'.

Answer 1

One way is to run the event on keyup and check the size of the input value.

To hide the div just put the event on document and check by clicking if the event contains the div #pesquisas, if it does not, it means that the click was outside the element

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

Answer 2

There are many ways to do this, one of them is to put an event of input for when something is typed in the field show the list and already go filtering:

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

Answer 3

Good afternoon, although probably out of the subject, I believe that your idea is to give suggestions to the user from the input, I’ve done something similar myself and it was very cool, but after having discovered the datalist(New feature of HTML5), would only create one of these if I really want to work the style, but I believe it fits the suggestion to use a datalist.

Example:

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

I hope it helped.