Скрытие списка предложений автозаполнения элемента управления AJAX на размытие

Question

Я использую поле «autosuggest» AJAX: пользователь вводит строку в текстовое поле ввода, отображается скрытый div с таблицей, а затем он может щелкнуть строку или прокрутить список с помощью/ стрелки вниз;в то же время, фокус все еще остается на поле ввода текста.

Все работает в основном нормально, но есть деталь, которую я не могу реализовать, которая кажется концептуально сложной или даже невозможной.Я хотел бы скрыть список предложений, когда пользователь перемещает курсор в другое поле ввода или просто щелкает пустую точку окна.Этого нетрудно достичь само по себе, я просто добавил обратный вызов OnBlur ;но это нарушает выбор элемента OnClick , так как событие onblur срабатывает до нажатия, а затем DIV исчезает до того, как событие onclick инициируется ...

Я думал о реализации обратного вызова по всему окну, а затем проверил, где произошел щелчок, но это кажется слишком неловким и искаженным.У кого-нибудь есть идея получше?Спасибо!

Answer 1

Я работал над той же проблемой и нашел следующее решение.Список автозаполнения сделан скрытым при щелчке документа, который также работает в IE (window.onclick не работает в IE).

document.onclick = function(ev) 
{
    this.hideAutosuggestListDiv();
};

this.hideAutosuggestListDiv = function()
{
    this.div.style.display = 'none';
};

Answer 2

Для тех, кто работает с jquery, триггер события focusout отлично подходит для этого:

$('#input-box').focusout(function() {
    $('#suggestions').fadeOut(); 
});

Answer 3

У меня была проблема с симуляцией, но я нашел другое решение:

document.onclick = closeSuggest;
function closeSuggest() {
  document.getElementById('suggestions').style.display = "none";
}

function catchTAB(event) {
  if(event.keyCode ==9) {
    closeSuggest();
    document.getElementById('ELEMENT').focus(); //the element that is currently focused
  }
}

Надеюсь, это поможет

Answer 4

В настоящее время я пытаюсь решить ту же проблему.

Частичное решение:

Используйте функцию, чтобы подождать долю секунды, прежде чем очистить автопредставление DIV

function pause(milliseconds) {
        var dt = new Date();
        while ((new Date()) - dt <= milliseconds) {  }
}

onBlur="pause(500);clearAutosuggestBox()"

Тем не менее, это решение не элегантно и не работает во всех браузерах.

Рассматривая некоторые популярные блоки автозаполнения, я не сталкивался с тем, что заставляет информацию автозаполнения исчезать, когдаВы щелкаете снаружи, скорее они обычно истекают и исчезают.

Удачи.