為什么我所有的我 <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