jQuery Mobile - 过滤器样式
描述
您可以使用 data-filter-theme 为文本字段设置特定主题，还可以使用 data-filter-placeholder 提供占位符。
此外，小部件将提供同步选项，这些选项将在文本输入的小部件和它过滤的子部件之间共享。 这确保了 textinput 小部件选项的值与小部件选项的值相同。
例如，每当在列表视图上设置 data-inset = "true" 时，相应的文本输入小部件也将被插入。
示例
以下示例演示了在 jQuery Mobile 中使用 过滤器样式。
<!DOCTYPE html>
<html>
<head>
<title>Filter Styling</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>
<ul data-role = "listview" data-filter = "true"
data-filter-placeholder = "Find cars..." data-filter-theme = "a"
data-inset = "true">
<li>Audi</li>
<li>BMW</li>
<li>Ford</li>
<li>Hyundai</li>
<li>Mahindra</li>
<li>porsche</li>
<li>Renault</li>
<li>Toyota</li>
</ul>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 filterable_styling.html 文件。
将此 HTML 文件打开为 http://localhost/filterable_styling.html，将显示以下输出。
