jQuery Mobile 过滤

举报
上传头像 发表于 2021/04/15 10:52:31 2021/04/15
【摘要】 可过滤元素所有的元素如果有一个或更多的子元素均可过滤。如何创建搜索字段:你想过滤的元素必须使用 data-filter="true" 属性。创建 <input> 元素并指定 id,元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中,表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段...

可过滤元素

所有的元素如果有一个或更多的子元素均可过滤。

如何创建搜索字段:

  • 你想过滤的元素必须使用 data-filter="true" 属性。
  • 创建 <input> 元素并指定 id,元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中,表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
  • 接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。

接下来我们创建一个可过滤的列表:

列表中搜索元素

<form class="ui-filterable">
  <input id="myFilter" data-type="search">
</form>


<ul data-role="listview" data-filter="true" data-input="#myFilter">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
</ul>

尝试一下 »

提示: 可以在搜索字段中使用 placeholder 属性来设置提示信息:

实例

<input id="myFilter" data-type="search" placeholder="根据名称搜索..">

尝试一下 »

自定义过滤

一般的插入到各个列表项的文本就是作为过滤的文本使用(如 A 对应 "Adele" 或 "B" 对应 "Billy")。 但是,如果你想指定自定义的过滤的文本,你需要在子元素中使用 data-filtertext 属性:

实例

<li data-filtertext="fav"><a href="#">Adele</a></li>

尝试一下 »
如果你在元素中使用了 data-filtertext 属性,元素的源文本内容在过滤时将被忽略, 这时你如果还要查找列表项"Adele",需要使用的关键字为:f, a, v 或 fav。

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。