jQuery выпадающий автоматически предложить divs - исчезнуть после того, как пользователь щелкнет за пределами поля ввода, которое вызывает div?

Question

У меня есть поле ввода поиска на моем веб-сайте - абсолютно аналогичное тому, что на Facebook.Когда вы вводите любой символ в поле ввода, jQuery создает автоматически предлагаемые выпадающие элементы div в соответствии с этими символами.Отлично работает.

Но у меня есть проблема - если эта область ввода не пуста, выпадающий список div, сгенерированный jQuery, остается открытым все время, пока вы не удалите все символы из этого поля ввода.1004 * Так что мой вопрос очень прост - как мне сделать, когда вы щелкаете за пределами этого выпадающего списка div (или, я полагаю, поля ввода) - чтобы этот выпадающий список просто исчез?

Answer 1

Примерно так:

$(document).click(function (event){
    if( $(event.target).parents('.dropdown-div-class,.input-class').length==0 ){
        $('.dropdown-div-class').hide();
    }
});

dropdown-div-class - это класс div, который вам нужно скрыть, input-class - это класс вашего поля ввода. Вы можете изменить селектор в соответствии с вашими потребностями. Но, в большинстве случаев, все такие скрипты также включают эту функцию. Проверьте, есть ли у вас какие-либо ошибки или что-то еще, что не позволяет скрыть div.

Answer 2

$('input').blur(function() {
    $(this).hide();
});

Answer 3

Было бы полезно, если бы мы могли увидеть некоторый код, но вы, вероятно, могли бы достичь этого, используя методы .blur или .focusout .

Answer 4

Вы можете привязать событие click к своему телу и проверить, является ли выбранный элемент выпадающим элементом или входом или дочерним элементом выпадающего элемента.Если ни один из них не соответствует действительности, то вам следует скрыть выпадающий элемент div.