Question

我编写了一个自动完成类型的东西，它通过div并将它们添加到列表中，如果找到了它们的名称/ id。我正在使用我在网上找到的事件处理程序，它可以在任何类型的输入更改时调用。我遇到的问题是：当找到有效的div并将其添加到自动完成列表，然后用户继续键入，但是输入了无效的div名称时，将从列表中删除div名称;但是，如果没有找到div，则列表仍然存在但是空白。

更好的解释方法是尝试一下。

http://jsfiddle.net/ypz0zrzv/21/

在框中键入“Test Unit”，然后继续键入随机字母。我想要删除现在的空列表。问题是，当我实现这样一个功能时，它只会在输入第二个字符后发生。这是因为处理程序在输入更改时检查列表。

因此，如果我输入“Test Unit”，它会添加div。如果我输入“Test Unita”，它会显示一个空白的自动完成div。如果我输入“test Unitaa”，现在自动完成div将消失。我很困惑如何在找不到div后立即将自动填充变为空白。

有问题的代码问题

if ($('#autocomplete_list li').length === 0){
    hide_remove($('#autocomplete'))   
}

Answer 1

您检查自动完成位置错误。这是由错误的事件引发的。

我将支票移动到自己的功能中，以防您以后再调用此支票：

function checkArray(){
    console.log($('#autocomplete_list li').length);
    if ($('#autocomplete_list li').length <= 0){
        hide_remove($('#autocomplete'))   
    }
}

然后我将checkArray()函数添加到hide_remove()函数中。

function hide_remove($div){
    if ($div.length > 0){
        $div.slideUp(250, function(){
           $div.remove(); 
            checkArray();
        });
    }
}

这是DEMO。希望这有帮助！

输入更改时删除div

1 个答案: