简介：List.js 是一个轻量级的库，可将任何 HTML 列表转换为可搜索、可过滤和可排序的表格。它使用简单，只需要少量的代码就可以实现搜索和过滤功能。
官方地址：https://listjs.com/
1.安装list.js
您可以通过从list.js官方网站下载最新版本的list.js库文件，或使用npm包管理器进行安装。
2.初始化list.js
在使用list.js之前，您需要先初始化它。您可以使用以下代码初始化list.js：
var options = {
valueNames: ['name', 'age', 'city']
};
var userList = new List('users', options);
此代码将初始化一个名为“users”的HTML元素，并告诉list.js对名称、年龄和城市字段进行搜索、过滤和排序。
3.搜索列表
一旦您已经初始化了list.js，您就可以使用它来搜索您的列表。例如，如果您想搜索名称字段中包含“John”的所有项目，您可以使用以下代码：
userList.search('John');4.过滤列表
除了搜索列表之外，list.js还可以用于过滤列表。例如，如果您想只显示年龄大于等于30的项目，您可以使用以下代码：
userList.filter(function(item) {
return item.values().age >= 30;
});
这将只显示年龄大于等于30的项目。
5.排序列表
您还可以使用list.js对列表进行排序。例如，如果您想按照名称字段按字母顺序对项目进行排序，您可以使用以下代码：
userList.sort('name');
这将按照名称字段对项目进行升序排序。
6.更新列表
如果您的列表在用户与之交互时需要更新，您可以使用以下代码更新列表：
userList.update();
7.更多选项
除了上述选项之外，list.js还有许多其他选项和方法，可以根据您的需求进行定制。您可以在list.js的官方文档中查找更多信息。
完整的代码如下：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
<div id="test-list">
<input type="search" class="search" />
<div id="company-box" class="company-box list">
<a href="javascript:void(0)"><p class="name">Jonny</p></a>
<a href="javascript:void(0)"><p class="name">Berlin</p></a>
<a href="javascript:void(0)"><p class="name">Sundsvall</p></a>
</div>
</div>
<script>
var monkeyList = new List('test-list', {
valueNames: ['name']
});
</script>
List.js Download:
https://listjs.com/overview/download/