Question

我一直在编写自己的自动建议，而不是只填写表单输入，它实际上生成了一个链接和图片的HTML列表，它直接来自AJAX请求。我遇到的一个问题是，如果输入失去焦点，我需要隐藏生成的列表，但是如果您尝试单击生成列表中的链接并且它没有注册点击就会消失，这也会发生。

这是我的代码：

var delay = false;
var landing = $('#suggestions');
$('#suggest').keyup(function(e) {   
    if (e.keyCode > 40 || e.keyCode == 8) { //If a letter or backspace
        if(this.value.length >= 3) { // if > 3 characters in the input
            $(this).addClass('loading');
            clearTimeout(delay);
            var query = this.value;
            delay = setTimeout( function() {
                $.ajax({
                    url: '/response.php', //returns HTML
                    type: 'get',
                    data: { 'q' : query },
                    dataType: 'html',
                    success: function(data) {
                        $('#suggest').removeClass('loading');
                        landing.show().html(data);
                    }
                });
            }, 200);

        } else {
            landing.empty();
        }
    }

})

.focus(function() {
    if($(this).val() == 'Search...') {
        $(this).val('');
    }

    if($(this).length) {
        landing.show();
    }
})

.blur(function() {
    if(this.value.length) {
        setTimeout(function() {
            landing.hide();
        }, 150)
    } else {
        $(this).val('Search...');
    }
})

.attr('autocomplete', 'off');

.blur（）是导致问题的地方，我试图添加超时但事实证明这是非常不可靠的。

此外，任何改进我目前所写内容的意见/建议都会受到赞赏！

经过大量实验后，我想出的最佳解决方案是在#suggestions登陆<div>上切换'persist'变量，因此如果用户，`blur（）``将不会执行任何操作正在#suggestions框上做点什么：

$('#suggest').blur(function() {
    if(this.value.length) {
        if(landingPersist == false) {
            landing.hide();
        }
    } else {
        $(this).val('Search Knowledge Base');
    }
})

$('#suggestions').mouseover( function() {
    landingPersist = true;
})

.mouseout(function(){
    landingPersist = false;
});

这种方法不需要live（）或定时器，我认为这是一件好事。检查blur() #suggest中的持久变量。这符合

Answer 1

首先，添加全局变量（在任何函数之外），如下所示：

var _hideLandingTimer = 0;

其次，更改blur：

中的代码

_hideLandingTimer  = setTimeout(function() {
            landing.hide();
        }, 150);

最后有这个：

$('#suggest a').click(function() {
   window.clearTimeout(_hideLandingTimer);
});

如果点击了链接，这将清除计时器（因此不会隐藏着陆），

如果单击某个元素，则无需在输入上激活.blur（）

1 个答案: