jquery mobile listview列表属性(搜索自动填充检索效果)

时间 2019-11-20

标签 jquery mobile listview 列表属性搜索自动填充检索效果栏目 JQuery 繁體版

原文原文链接

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css">
 7 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
 8 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
 9 </head>
10 <body>
11 <ul data-role="listview"><!-- 无序列表 -->
12     <li>A</li>
13     <li>B</li>
14     <li>C</li>
15     <li>D</li>
16 </ul>
17 <ol data-role="listview">    <!-- 有序列表 -->
18     <li><a href="">A</a></li><!-- 改变成可点击的状态 -->
19     <li>1</li>
20     <li>1</li>
21     <li>1</li>
22 </ol>
23 <ul data-role="listview"><!-- 无序列表可点击 -->
24     <li><a href="">A</a></li>
25     <li><a href="">A</a></li>
26     <li><a href="">A</a></li>
27     <li><a href="">A</a></li>
28 </ul>
29 <hr><!-- hr为加一条横线 -->
30 <ul data-role="listview" data-filter="true" data-inset="true">
31 <!-- 输入a的时候只显示a，输入b只显示b，删除的话返回到最初的状态 -->
32     <li><a href="#">A</a></li>
33     <li><a href="#">B</a></li>
34     <li><a href="#">C</a></li>
35     <li><a href="#">D</a></li>
36 </ul>
37 <br>
38 <!-- 过滤效果在只有一个输入框的状况下显示的状况下，下面的列表不进行加载 -->
39 <!-- 使用form表单提交的进行操做 -->
40 <form class="ui-filterable">
41     <input id="autoinput" data-type="search"><!-- 输入框的id和类型data-type -->
42 </form>
43 <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-input="true">
44 <!-- data-role="listview"清除了默认的列表样式 -->
45 <!--指定无序列表内的属性：  data-filter为默认不展开 data-filter-reveal="true" 默认将其过滤掉，
46 data-input="#autoinput"经过form表单进行提交操做；data-input="true"指定为可插入的状态-->
47     <li><a href="#">A</a></li>
48     <li><a href="#">B</a></li>
49     <li><a href="#">C</a></li>
50     <li><a href="#">D</a></li>
51     <li><a href="#">A</a></li>
52     <li><a href="#">B</a></li>
53     <li><a href="#">C</a></li>
54     <li><a href="#">D</a></li>
55 </ul>
56 <!-- liru通信录中的ABCD的索引内容 -->
57 <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
58 <!-- 有个颜色的加深效果，全部字母a的索引，全部字母b的索引，等等 -->
59 <!-- data-autodividers="true"生成对应的索引 -->
60     <li><a href="#">生成第一个字的索引&ldquo;&rdquo;</a></li>
61     <li><a href="#">B</a></li>
62     <li><a href="#">C</a></li>
63     <li><a href="#">D</a></li>
64     <li><a href="#">A</a></li>
65     <li><a href="#">B</a></li>
66     <li><a href="#">C</a></li>
67     <li><a href="#">D</a></li>
68 </ul>
69 </body>
70 </html>

即添加data-role="listview"清除默认列表样式javascript

data-filter为默认不展开css

data-filter-reveal="true" 默认将其过滤掉，
data-input="#autoinput"html

经过form表单进行提交操做；java

data-input="true"指定为可插入的状态jquery

显示效果为：在输入框输入内容，显示相关内容，ide

或者如同通信录，按关键词顺序进行排序ui