javascript - 过滤掉不包含搜索字符串的元素[有解决方案，寻求改进]

Question

好吧，这很难用标题来描述。 我有一个输入字段和三个段落[将它们称为“Ps”]

<p>ABCD</p>
<p>CDEF</p>
<p>XYZ</p>

现在，当在输入字段中按下按钮时，不包含搜索字符串的段落将被过滤掉 hide()。完成以下操作:

$("input").keyup(function(){
    var x = $(this).val();
    $("p:not(:contains('" + x + "'))").hide();
});

当按下退格键或删除键时，不包含搜索字符串的 Ps 会再次显示 show()，如下所示:

$("input").keydown(function(){
        var x = $(this).val();
        var key = event.keyCode || event.charCode;

        if( key == 8 || key == 46 ){
            $("p:not(:contains('" + x + "'))").show();
        }
});

现在这会导致奇怪的行为。我真的不好解释这个。。 要了解我在说什么，请按照本 fiddle result 中的这些步骤操作

1. 点击进入输入框

2. 键入“abc”[在键入“a”后立即隐藏最后两个 P]

3. 输入“x”[因此输入现在是“abcx”并且第一个 P 已被隐藏]
4. 按退格键并密切注意 [所有 P 都会显示一瞬间，然后只有第一个按预期显示]

这是 full JSFiddle

所以，我想知道的是，是否有办法不在那一瞬间显示所有 P，而是在按下退格键时只显示第一个 P。

Answer 1

你可以这样简单地做

$("input").keyup(function(){
        var x = $(this).val();
        $("p:not(:contains('" + x + "'))").hide();
        $("p:contains('" + x + "')").show();
});

Fiddle