jQuery Mobile - 可过滤的预呈现
描述
可过滤小部件在启动期间执行一次过滤器，以确保子列表返回搜索输入中输入的值。 为防止这种情况，请指定 data-enhanced = "true" 属性。
每当此属性设置为 true 时，都假定您已将 uiscreen 类正确应用到那些最初必须隐藏的子级。 可过滤小部件使用搜索输入来确定搜索输入是否已预呈现。
以下示例预呈现搜索输入和可过滤项。
示例
以下示例演示了在 jQuery Mobile 中使用可过滤预呈现。
<!DOCTYPE html>
<html>
<head>
<title>Filterable Pre-rendering</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<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.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<div class = "ui-input-search ui-body-inherit ui-corner-all
ui-shadow-inset ui-input-has-clear">
<input data-type = "search" data-enhanced = "true" data-inset = "false"
id = "pre-rendered-example-input" placeholder = "search cars..." value = "or" />
</div>
<div data-role = "controlgroup" data-enhanced = "true" data-filter = "true"
data-filter-reveal = "true" data-input = "#pre-rendered-example-input"
class = "ui-controlgroup ui-controlgroup-vertical ui-corner-all">
<div class = "ui-controlgroup-controls">
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow
ui-screen-hidden">Audi</a>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-first-child
ui-shadow ui-last-child">Ford</a>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow
ui-screen-hidden">Hyundai</a>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow
ui-screen-hidden">Tata</a>
</div>
</div>
</form>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 filterable_prerendering.html 文件。
将此 HTML 文件打开为 http://localhost/filterable_prerendering.html，将显示以下输出。
