为什么我所有的我 <LI> 当我在输入框中清除/删除要搜索的值时，仍保持选中状态

Question

我需要该站点的专家和专家的帮助。

问题是，一旦我在输入框中搜索值，一切都会按预期进行，除了以下事实：清除输入框后，所有<LI>保持“选中”状态，从而使它们突出显示。 我如何才能让它们全部恢复为白色/未选中状态的默认格式？

我在这里为您整理了一个小提琴：

http://jsfiddle.net/uG9fq/2/

/* find item in list as you type */
    $("#refdocs").keyup(function(){ // onkeyup for the input field
        var pattern = new RegExp($(this).val()); // store current value of input field as a RegExp pattern (though it could just be a string)
        $("#refdocs_list li").each(function(){ // go through each item and try to match the pattern
            var text = $(this).text();
            if(text.match(pattern) !== null){
                $(this).addClass("selected"); // pattern found - set .selected
            }
            else{
                $(this).removeClass("selected"); // pattern not found - remove .selected
            }
        });
    });

Answer 1

这是因为您没有检查一个空值，该值将匹配所有内容

$("#refdocs").keyup(function(){
    var val = $(this).val();
    var pattern = new RegExp(val);
    $("#refdocs_list li").each(function(){
        var text = $(this).text();
        if(text.match(pattern) !== null && val.length){
            $(this).addClass("selected");
        }
        else{
            $(this).removeClass("selected");
        }
    });
});

小提琴

眼睛更容易一点

$("#refdocs").on('keyup', function(){
    var val = this.value;
    $("#refdocs_list li").each(function() {
        $(this).toggleClass('selected', $(this).text().indexOf(val) != -1 && val.length > 0);
    });
});

Answer 2

如果该值为空，则只需要删除所选的类

if($(this).val() === ''){
    $('#refdocs_list ul li').removeClass('selected');
}

看到我更新的jsfiddle