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

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

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

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


ajax onblur autocomplete
person Francesco Marchetti-Stasi    schedule 05.05.2011    source источник
comment
Вы когда-нибудь догадывались об этом? У меня возникла эта проблема прямо сейчас, и я не могу найти хорошее решение, позволяющее запускать onBlur, не нарушая выбор очистки или щелчка мыши...   -  person kgstew    schedule 05.02.2016
comment
кто-нибудь может ответить на этот вопрос, у меня такая же проблема.   -  person Abhishek Kamal    schedule 29.08.2020
comment
Я использовал трюк, добавив setTimeout, когда окно автозаполнения скрывается по событию blur. Но у этого трюка есть проблема с active элементом окна автоподсказки.   -  person Abhishek Kamal    schedule 29.08.2020

Ответы (4)


arrow_upward
2
arrow_downward

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

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

this.hideAutosuggestListDiv = function()
{
    this.div.style.display = 'none';
};
person Bharat Darakh    schedule 17.10.2012

arrow_upward
1
arrow_downward

У меня была похожая проблема, но я придумал немного другое решение:

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
  }
}

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

person Jeff    schedule 22.06.2011

arrow_upward
1
arrow_downward

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

$('#input-box').focusout(function() {
    $('#suggestions').fadeOut(); 
});
person Varun Jain    schedule 08.02.2014

arrow_upward
0
arrow_downward

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

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

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

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

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

Однако это решение не является элегантным и работает не во всех браузерах.

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

Удачи.

person Nathan Lippi    schedule 05.05.2011
comment
Я согласен, это не очень элегантно, но все же менее неловко и проще, чем моя идея с кликом по полному окну... Почему вы думаете, что это не будет работать во всех браузерах?... - person Francesco Marchetti-Stasi; 06.05.2011
comment
Привет, только что увидел ваш ответ... ну, я попробовал это решение несколько дней назад, и, похоже, оно работает во всех браузерах, кроме одного (извините, я не помню, в каком)... также, если чей-то компьютер работает медленно , время паузы должно быть больше. - person Nathan Lippi; 09.05.2011