0

Estou construindo um select customizado com autocomplete e para isto estou usando algumas <div>'s, um <input> e jQuery.

Eu gostaria que ele tivesse o mesmo comportamento padrão de um select HTML de quando se clica fora do mesmo, ele se fecha.

Meu HTML, em linhas gerais, está assim:

<div class="my-select-container">
    <input id="my-input" type="text" value="" onkeyup="myAutocomplete(this);">
    <div class="my-options-container"></div>
</div>

Estou usando a função JavaScript myAutocomplete() para fazer todo trabalho de auto complete e manipular as divs com sucesso, meu único problema é fazer a div my-options-container se fechar ao clicar fora do select.

A função myAutocomplete() é a seguinte:

function autocomplete_region(obj) {
    var value = $(obj).val();

    // Only executes if there is some text on search input
    if (value) {
        // Mount request URL        
        var url = '/options/' + value + '/';

        // Send the request to server
        $.get(url,
            function (response) {
                // Continues only if there is a response
                var options = (response["options"] == undefined) ? response : response["options"];

                if (options.length > 0) {
                    // Clear old options
                    $('#my-options-container').html('');

                    // Populate items
                    for (var i = 0; i < options.length; i++) {
                        var href_value = '/?code=' + options[i].code + '/';
                        var item = '<a id="option_' + i + '" href="' + href_value + '"><div>' + options[i].text + '</div></a>';

                        $('#my-options-container').html($('#my-options-container').html() + item);
                    }

                    // Shows options div
                    if ($('#my-options-container').is(':hidden'))
                        $('#my-options-container').show();

                } else {
                    $('#my-options-container').html('<span>Ops! Nenhuma opção disponível.</span>');

                    // Shows options div
                    $('#my-options-container').show();
                }
            });
    } else {
        // Hides options div
        $('#my-options-container').hide();

        // Empty options div
        $('#my-options-container').html('');
    }
}
12
  • Cara coloca o se script ai na pergunta tb, facilita para te responder e para similar a situação ai
    – hugocsl
    12/04/2019 às 21:15
  • Queres fechar o select quando o input perder o focused ou como o nativo quando clicares fora?
    – Sergio
    12/04/2019 às 21:40
  • @Sergio Quando perder o focusedseria melhor. 12/04/2019 às 21:44
  • 1
    @hugocsl Achei desnecessário colocar a função myAutocomplete() na pergunta porque ela ficou relativamente grande por fazer outras coisas como pegar as opções em uma API além de apenas mostrar e esconder a <div> que mostra as opções. 12/04/2019 às 21:46
  • Vc tá usando algum componente para criar o select ou está fazendo na mão mesmo?
    – Meu ovo
    12/04/2019 às 21:58

1 Resposta 1

1

Clicar no document esvaziar e esconder a div.#my-options-container. Basta verificar no click no document se o local do click não é a div.my-select-container:

$(document).on("click", function(e){
   if($(e.target).closest(".my-select-container")[0]){
      e.stopPropagation();
   }else{
      $('#my-options-container').hide().empty();
   }
});

O e.stopPropagation(); irá cancelar o click no document se o clique foi feito dentro da div.my-select-container.

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 .