📅 最后修改于: 2023-12-03 15:32:09.090000 🧑 作者: Mango
在 jQuery Mobile 中，可过滤的 destroy() 方法用于销毁已初始化的可过滤列表及其相关的 DOM 元素。该方法可以释放资源和内存，避免对性能造成不良影响。
$(selector).filterable("destroy")
其中，selector 表示可过滤列表的选择器。当调用该方法时，jQuery Mobile 会移除匹配的 DOM 元素及相关数据，以销毁可过滤列表。
以下示例演示了如何初始化和销毁可过滤列表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile 可过滤的列表</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>可过滤的列表</h1>
</div>
<div data-role="main" class="ui-content">
<form>
<input id="myfilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-inset="true" id="mylist">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Lemon</a></li>
<li><a href="#">Orange</a></li>
</ul>
</div>
<div data-role="footer">
<h4>版权所有：XXX 公司</h4>
</div>
</div>
<script>
$(document).on("pagecreate", function() {
$("#mylist").filterable();
$("#myfilter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#mylist li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
// 销毁可过滤列表
function destroyFilterable() {
$("#mylist").filterable("destroy");
}
</script>
</body>
</html>
在该示例中，包含了一个可过滤的列表和一个搜索框。当用户输入关键字时，列表会实时过滤显示结果。同时，还定义了一个 destroyFilterable() 函数，用于销毁可过滤列表。