How to close a select by clicking outside it?

Asked

Viewed 271 times

0

I am building a custom select with autocomplete and for this I am using some <div>'s, one <input> and jQuery.

I wish it had the same default behavior as a select HTML when you click outside it, it closes.

My HTML, in general, is like this:

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

I’m using the Javascript function myAutocomplete() to do all the work of auto complete and successfully manipulate the Divs, my only problem is to do the div my-options-container close when clicking outside the select.

The function myAutocomplete() is the following:

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('');
    }
}
javascript jquery

  • Guy puts the if script ai in question tb, facilitates to answer you and for similar situation ai

  • Want to close select when input is lost focused or as native when you click out?

  • @Sergio Quando perder o focusedwould be better.

  • 1

    @hugocsl I found it unnecessary to put the function myAutocomplete() on the question why it got relatively large by doing other things like picking up options on an API other than just showing and hiding the <div> that shows the options.

  • You are using some component to create the select or are doing in the same hand?

  • @Sam In the same hand.

  • Ask the question about the function (or functions) and/or CSS that opens the select. This is the only way to know how to do the reverse (close the select).

  • I’ll put then, one minute.

  • Put it there and I’ll adjust my answer more precisely.

  • @hugocsl I put the script.

  • @Sam See if you’ve improved the question.

  • So. You’re gonna put in else of my answer the same else of the autocomplete function. This else where you have // Hides options div.

Show 7 more comments

1 answer

1


Click on document empty and hide the div.#my-options-container. Just check in the click in the document if the location of the click is not the 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();
   }
});

The e.stopPropagation(); will cancel the click on document if the click was made inside the div.my-select-container.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.