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

Why do my all my <LI>'s remain selected when I clear/delete the value to search for in my input box

本文关键字：我的 LI 状态 删除 清除 搜索 输入 为什么      更新时间：2023-09-26

我需要这个网站上的大师和专家的帮助。

问题是，一旦我在输入框中搜索一个值，一切都按预期工作正常，除了当输入框被清除时，我的所有<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
            }
        });
    });

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

$("#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);
    });
});

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

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

查看我更新的 JSFIDDLE

相关文章：