Jquery - Нажмите снаружи и Скрыть Div

Question

Я использую это: http://www.useful -dates.com / search /

Как должен быть написан сценарий, чтобы сказать: 1. Когда пользователь нажимает на ввод, отображается прокручиваемый div. 2. Когда пользователь щелкает за пределами прокручиваемого div, прокручиваемый div скрывается.

Вот так, но мне не повезло переписать сценарий: http://rob -bell.net / static / ddlist.html

Iv искал и пробовал все виды вещей в сети, и не повезло, пожалуйста, помогите?

Answer 1

Самый простой способ сделать это - когда ваш скрипт запускается для отображения списка (прокручиваемый div), он также создает триггер для события click на самом документе.Примерно так:

$("selector to your div").click(function() {
    var scrolledDiv = $("selector to your scrolled div");
    scrolledDiv.show();
    $(document).one(function() {
        scrolledDiv.hide();
    });
});

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

$("selector to your scrolled div").click(function(e) {
    e.stopPropagation();
});

Answer 2

Если вы посмотрите на исходный код вашего примера;

            $(document).click(function(){

                $('.ddcontainer > div > ol').hide();

            });

Это скрывает элемент div, когда был нажат документ.

Дайте вам DIV идентификатор, например, так:

<div id="searchResults" style="height:95px;width:290px;overflow:scroll;overflow-x:hidden;margin: 2px 0 0 0;">

и затем:

$(document).click(function(){

    $('#searchResults').hide();

});

В качестве альтернативы и, возможно, лучшим решением будет использование focus и blur:

$("#kwd_search").focus(function(){
    $('#searchResults').show();
}).blur(function(){
    $('#searchResults').hide();
});

Это покажет результаты, когда фокус помещен на вход, и удалит его, когда вы «оставите» вход.

UPDATE

С плагином автозаполнения вы можете выполнить задачу после того, как элемент был выбран следующим образом:

$( "#tags" ).autocomplete({
    source: availableTags
}).bind( "autocompleteselect", function(event, ui) {
    location.href = ui.item.value; // If the value of the item is a url, this will forward you to it
});