jQuery入学16_jQueryModie搜索列表

最新推荐文章于 2021-06-05 02:36:01 发布

原创最新推荐文章于 2021-06-05 02:36:01 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

16 篇文章

订阅专栏

博客介绍了使用data-filter属性实现元素过滤的方法。通过给表单<form>元素添加'ui-filterable'类，<input>元素指定id并加data-type='search'属性；过滤元素使用data-filter='true'属性，添加data-input属性并赋值为<input>元素id，可实现过滤功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data-filter="true" 属性可过滤的元素
1表单 <form> 元素使用 "ui-filterable" 类，表单中放置<input> 元素，并指定 <input> 元素id，且加上 data-type="search" 属性
如下：
<form class="ui-filterable">
<input id="empid" data-type="search" placeholder="根据工号搜索.." >
</form>

2过滤元素(比如，列表ul元素中搜索)使用 data-filter="true" 属性,接着为过滤元素添加 data-input 属性，该值是表单中 <input> 元素的 id
如下：
<ul data-role="listview" data-filter="true" data-input="#empid">
<li><a href="#">C10094207</a></li>
<li><a href="#">C10094365</a></li>
<li><a href="#">C10095008</a></li>
</ul>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pg1">
  <div data-role="main" class="ui-content">
    <h2>工号</h2>
    <form class="ui-filterable">
      <input id="empid" data-type="search">
    </form>
    <ul data-role="listview" data-filter="true" data-input="#empid"  data-inset="true">
      <li>C10094207</li>
  	  <li>C10094365</li>
  	  <li>C10095008</li>
	  <li>C10096365</li>
  	  <li>C10097008</li>
	  <li>C10098365</li>
  	  <li>C10099008</li>
    </ul>	  
  </div>
</div>
</body>
</html>