假设你的ul有一个theList的id，下面是一种方法。

<input type="text" onkeyup="filter(this)" />

<script language="javascript" type="text/javascript">
    function filter(element) {
        var value = $(element).val();

        $("#theList > li").each(function() {
            if ($(this).text().search(value) > -1) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        });
    }
</script>

如果你不希望有区分大小写的过滤器，那么就像这样在这些行中添加.toLowerCase()：

var value = $(element).val().toLowerCase();
if ($(this).text().toLowerCase().search(value) > -1)

或者，基于Marek Tihkan发布的更简洁的版本，您可以将each（）循环替换为以下内容。不确定这是否会执行得更好或更差。

$('#theList > li:not(:contains(' + value + '))').hide(); 
$('#theList > li:contains(' + value + ')').show();

如果输入文本为空，则Nikolas给出的解决方案与Marek的解决方案相结合会产生错误。
下面的解决方案纠正了这一点，并且适用于由'a'标签包围的列表。
该函数还被设计为过滤首字母大写的单词的元素（例如名称）。因此过滤是有序的。如果您键入'An'或'an'，那么您将获得列表中以这些字母开头的所有元素（例如Anthony将匹配，但Fanny不匹配）。

function filter (element,what) {
    var value = $(element).val();
    value = value.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });

    if (value == '') {
        $(what+' > a > li').show();
    }
    else {
        $(what + ' > a > li:not(:contains(' + value + '))').hide();
        $(what + ' > a > li:contains(' + value + ')').show();
    }
};

下面是使用脚本的示例HTML代码：

<input type="text" onkeyup="filter(this,'theList')" />
<ul id="theList">
    <li><a href="">Tyrone Schlecht</a></li>
    <li><a href="">Javier Ress</a></li>
    <li><a href="">Carlene Tomes</a></li>
    <li><a href="">Neil Aigner</a></li>
    <li><a href="">Nita Schreffler</a></li>
    <li><a href="">Clinton Knuckles</a></li>
    <li><a href="">Eve Kellett</a></li>
    <li><a href="">Jamie Kaspar</a></li>
    <li><a href="">Emilia Hooton</a></li>
    <li><a href="">Kenya Sidney</a></li>
</ul>

我是通过迭代所有这些来实现的，隐藏那些不匹配的，显示那些匹配的。

$('li').hide(); 
$('li:contains(' + needle + ')').show();

您可以使用由John Resig从php移植到jQuery的LiveQuery。

• 注意 *：它依赖于Quicksilver's score method in PHP方法，该方法已通过LiquidMetal.score和joshaven's string.score移植到JavaScript
  使用示例：

$("#text_box_selector").liveUpdate("#list_selector");

• 注意 *：#list_selector必须找到包含li元素的元素

插件+排序+演示

x一个一个一个一个x一个一个二个x

// Just a shorter version
$('ul>li').hide().has(':contains(' + needle + ')').show();

// case insensitive searching with animation
$("ul>li").slideUp().filter( function() {
     return $(this).text().toLowerCase().indexOf(needle) > -1
}).stop(true).fadeIn();

从this W3 example中获得主要灵感，我开发了一个可能的替代方案和compact solution。
在链接的示例中，可以看到3个不同的选项：

• 仅筛选UL项目
• 筛选任何项目
• 过滤任何项目与css动画效果

最简单的JS代码如下所示，由于$("#anyItemList *")选择器，它可以简单地过滤任何类型的元素：

$("#anyItemListInputFilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#anyItemList *").filter(function() {
        let item = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).toggle(item);
    });
  });

如果所需的过滤将仅用于UL列表，则该选择器可以用$("#ulList li")改变（如示例中所示）。
如果你还想添加css动画效果，有一些限制：

• 需要在px中预定义max-height（如果设置一个足够高的max-height，可能不会有太大影响）
• overflow-y:hidden;

所以我不得不宣布：

#anyItemAnimatedList * {
  transition:all 0.5s ease;
  opacity:1;
  max-height:500px;
 overflow-y:hidden;
}

#anyItemAnimatedList ul {
  list-style-position:inside;
}

#anyItemAnimatedList .hidden {
  max-height:0;
  opacity:0;
  border:0;
}

隐藏效果是由opacity和max-height css过渡组合而成的，border:0是覆盖button标签默认浏览器样式所必需的。
此外，在OL和UL列表的情况下，需要设置list-style-position:inside;，因为Firefox和Chrome共享一个奇怪的默认行为，即在默认情况下隐藏list-style-position:outside的项目符号。
对于Firefox，这是自2003年以来的known bug！！！但Chrome也有相同的行为。

var text = $（this）.瓦尔（）.toLowerCase（）;
$（“li”）.each（function（）{ $（this）.text（）.toLowerCase（）.search（text）〉-1？$（this）.show（）：$（this）.hide（）;}）;